JS控制僞元素的方法彙總

時間 2019-11-13

標籤控制元素方法彙總欄目 JavaScript 简体版

原文原文鏈接

轉載自：http://www.jb51.net/article/81984.htmcss

一. 原因：瀏覽器

本文源於在OSC社區中，有人提問如何用jq獲取僞元素。我第一想法是強大的CSS Query應該能夠獲取僞元素吧。app

然而事實上，CSS Query並不能。即咱們不能經過$(「:before」)、$(dom).find(「:before」)或document.querySelector(「:before」)來獲取:before僞元素。dom

爲此，我不得不從新瞭解僞元素（Pseudo-elements）。爲何不能用JS直接獲取僞元素呢？優化

譬如::before和::after僞元素，用於在CSS渲染中向元素的頭部或尾部插入內容，它們不受文檔約束，也不影響文檔自己，隻影響最終樣式。這些添加的內容不會出如今DOM中，僅僅是在CSS渲染層中加入。url

事實上，僞元素能夠被瀏覽器渲染，但自己並非DOM元素。它不存在於文檔中，因此JS沒法直接操做它。而jQuery的選擇器都是基於DOM元素的，所以也並不能直接操做僞元素。spa

那該怎樣操做僞元素的樣式呢？.net

爲此，我決定好好總結一下JS控制僞元素的方法，方便之後查用。code

二. 僞元素有哪些：orm

首先，先簡單說一下僞元素都有哪些。僞元素有六個，分別是 ::after、::before、::first-line、::first-letter、::selection、::backdrop 。

在各大網頁中最經常使用的僞元素，是::after和::before。

這幾個僞元素的語意可參考個人另一篇文章《CSS僞元素選擇器總結》。

在CSS3中，建議僞元素使用兩個冒號(::)語法，而不是一個冒號 (:)，目的是爲了區分僞類和僞元素。大多數瀏覽器都支持這兩種表示語法。只有 ::selection 永遠只能以兩個冒號開頭(::)。由於IE8只支持單冒號的語法，因此，若是你想兼容IE8，保險的作法是使用單冒號。

三. 獲取僞元素的屬性值：

獲取僞元素的屬性值可使用 window.getComputedStyle() 方法，獲取僞元素的CSS樣式聲明對象。而後利用getPropertyValue方法或直接使用鍵值訪問均可以獲取對應的屬性值。

語法：window.getComputedStyle(element[, pseudoElement])

參數以下：

element（Object）：僞元素的所在的DOM元素；

pseudoElement（String）：僞元素類型。可選值有：」:after」、」:before」、」:first-line」、」:first-letter」、」:selection」、」:backdrop」；

舉個栗子：

 
         // CSS代碼 
        
         #myId:before { 
        
         content:  
         "hello world!" 
         ; 
        
         display: block; 
        
         width: 100px; 
        
         height: 100px; 
        
         background: red; 
        
         } 
        
         // HTML代碼 
        
         <div id= 
         "myId" 
         ></div> 
        
         // JS代碼 
        
         var 
         myIdElement = document.getElementById( 
         "myId" 
         ); 
        
         var 
         beforeStyle = window.getComputedStyle(myIdElement,  
         ":before" 
         ); 
        
         console.log(beforeStyle);  
         // [CSSStyleDeclaration Object] 
        
         console.log(beforeStyle.width);  
         // 100px 
        
         console.log(beforeStyle.getPropertyValue( 
         "width" 
         ));  
         // 100px 
        
         console.log(beforeStyle.content);  
         // "hello world!"

備註：

1.getPropertyValue()和直接使用鍵值訪問，均可以訪問CSSStyleDeclaration Object。它們二者的區別有：

對於float屬性，若是使用鍵值訪問，則不能直接使用getComputedStyle(element, null).float，而應該是cssFloat與styleFloat；
直接使用鍵值訪問，則屬性的鍵須要使用駝峯寫法，如：style.backgroundColor；
使用getPropertyValue()方法沒必要能夠駝峯書寫形式（不支持駝峯寫法），例如：style.getPropertyValue(「border-top-color」)；
getPropertyValue()方法在IE9+和其餘現代瀏覽器中都支持；在IE6~8中，可使用getAttribute()方法來代替；

2.僞元素默認是」display: inline」。若是沒有定義display屬性，即便在CSS中顯式設置了width的屬性值爲固定的大小如」100px」，可是最後獲取的width值還是」auto」。這是由於行內元素不能自定義設置寬高。解決辦法是給僞元素修改display屬性爲」block」、」inline-block」或其餘。

四. 更改僞元素的樣式：

方法1. 更換class來實現僞元素屬性值的更改：

舉個栗子：

 
         // CSS代碼 
        
         .red::before {  
        
         content:  
         "red" 
         ;  
        
         color: red;  
        
         } 
        
         .green::before {  
        
         content:  
         "green" 
         ;  
        
         color: green; 
        
         } 
        
         // HTML代碼 
        
         <div class= 
         "red" 
         >內容內容內容內容</div> 
        
         // jQuery代碼 
        
         $( 
         ".red" 
         ).removeClass( 
         'red' 
         ).addClass( 
         'green' 
         );

方法2. 使用CSSStyleSheet的insertRule來爲僞元素修改樣式：

舉個栗子：

1	`document.styleSheets[0].addRule(` `'.red::before'` `,` `'color: green'` `);` `// 支持IE document.styleSheets[0].insertRule('.red::before { color: green }', 0); // 支持非IE的現代瀏覽器`

方法3. 在 <head> 標籤中插入 <style> 的內部樣式：

 
         var 
         style = document.createElement( 
         "style" 
         );  
        
 
         document.head.appendChild(style);  
        
 
         sheet = style.sheet;  
        
 
         sheet.addRule( 
         '.red::before' 
         , 
         'color: green' 
         );  
         // 兼容IE瀏覽器 
        
 
         sheet.insertRule( 
         '.red::before { color: green }' 
         , 0);  
         // 支持非IE的現代瀏覽器 
        

或者用jQuery：

1	`$(` `'<style>.red::before{color:green}</style>'` `).appendTo(` `'head'` `);`

五. 修改僞元素的content的屬性值：

方法1. 使用CSSStyleSheet的insertRule來爲僞元素修改樣式：

var latestContent = "修改過的內容" ;

var formerContent = window.getComputedStyle($( '.red' ), '::before' ).getPropertyValue( 'content' ); document.styleSheets[0].addRule( '.red::before' , 'content: "' + latestContent + '"' ); document.styleSheets[0].insertRule( '.red::before { content: "' + latestContent + '" }' , 0);

方法2. 使用DOM元素的data-*屬性來更改content的值：

 
         // CSS代碼 
        
         .red::before { 
        
         content: attr(data-attr); 
        
         color: red; 
        
         } 
        
         // HTML代碼 
        
         <div class= 
         "red" 
         data-attr= 
         "red" 
         >內容內容內容內容</div> 
        
         // JacaScript代碼 
        
         $( 
         '.red' 
         ).attr( 
         'data-attr' 
         ,  
         'green' 
         );

六. :before和:after僞元素的常見用法總結：

1. 利用content屬性，爲元素添加內容修飾：

1）添加字符串：

使用引號包括一段字符串，將會向元素內容中添加字符串。栗子：

1	`a:after { content:` `"after content"` `; }`

2）使用attr()方法，調用當前元素的屬性的值：

栗子：

1 2	`a:after { content: attr(href); }` `a:after { content: attr(data-attr); }`

3）使用url()方法，引用多媒體文件：

栗子：

1	`a::before { content: url(logo.png); }`

4) 使用counter()方法，調用計時器：

栗子：

1	`h:before { counter-increment: chapter; cotent:` `"Chapter "` `counter(chapter)` `". "` `}`

2. 清除浮動：

1 2	`.clear-fix { overflow: hidden; zoom: 1; }` `.clear-fix:after { display: table; content:` `""` `; width: 0; clear: both; }`

3. 特效妙用：

 
         // CSS代碼 
        
         a { 
        
         position: relative; 
        
         display: inline-block; 
        
         text-decoration: none; 
        
         color: 
         #000; 
        
         font-size: 32px; 
        
         padding: 5px 10px; 
        
         } 
        
         a::before, a::after {  
        
         content:  
         "" 
         ; 
        
         transition: all 0.2s; 
        
         } 
        
         a::before {  
        
         left: 0; 
        
         } 
        
         a::after {  
        
         right: 0; 
        
         } 
        
         a:hover::before, a:hover::after {  
        
         position: absolute; 
        
         } 
        
         a:hover::before { content:  
         "\5B" 
         ; left: -20px; } 
        
         a:hover::after { content:  
         "\5D" 
         ; right: -20px; } 
        
         // HTML代碼 
        
         <a href= 
         "#" 
         >我是個超連接</a>

4. 特殊形狀的實現：

舉個栗子：（譬如對話氣泡）

 
         // CSS代碼 
        
         .tooltip { 
        
         position: relative; 
        
         display: inline-block; 
        
         padding: 5px 10px; 
        
         background: 
         #80D4C8; 
        
         } 
        
         .tooltip:before { 
        
         content:  
         "" 
         ; 
        
         display: block; 
        
         position: absolute; 
        
         left: 50%; 
        
         margin-left: -5px; 
        
         bottom: -5px; 
        
         width: 0;  
        
         height: 0;  
        
         border-left: 5px solid transparent; 
        
         border-right: 5px solid transparent; 
        
         border-top: 5px solid 
         #80D4C8; 
        
         } 
        
         // HTML代碼 
        
         <div class= 
         "tooltip" 
         >I'm a tooltip.</div>