小編給大家分享一下如何使用js實現before和after偽類的樣式修改，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

js有什么特點

1、js屬于一種解釋性腳本語言；2、在絕大多數瀏覽器的支持下，js可以在多種平臺下運行，擁有著跨平臺特性；3、js屬于一種弱類型腳本語言，對使用的數據類型未做出嚴格的要求，能夠進行類型轉換，簡單又容易上手；4、js語言安全性高，只能通過瀏覽器實現信息瀏覽或動態交互，從而有效地防止數據的丟失；5、基于對象的腳本語言，js不僅可以創建對象，也能使用現有的對象。

最近遇到一個需要改變:before,:after 偽類的樣式，發現css中并不能直接選擇某一個元素的:before和:after偽類元素，所以特總結了使用javascript和jQuery改變元素的:before和:after偽類樣式的方法。

類如如下的html及樣式

Hello,are you kain?

css樣式

.red:before {
  content: 'red',
  background-color : red
}

1.使用javascript或者jQuery切換，增加元素的類

.green:before {
  content: 'green';
  background-color: green;
}

$('p').addClass('green');

2.在存在的style文檔中動態插入樣式

document.styleSheet[0].addRule('.red:before','background-color:green');
document.styleSheet[0].insertRule('.red:before{background-color:green}',0);

3.創建一份新的樣式表，并使用JavaScript或jQuert將其插入到中

var style = document.creatElement('style');
document.head.appendChild(style);
sheet = style.sheet;
sheet.addRule('.red:before','background-color:green');
sheet.insertRule('.red:before{background-color:green}',0);

// jQuery
$('').appendTo('head');

4.使用HTML5的data-屬性，在屬性中使用attr()動態修改。

在p標簽中增加data-attr="red"屬性，然后

$('red').attr('data-attr','green');

以上是“如何使用js實現before和after偽類的樣式修改”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創新互聯成都網站設計公司行業資訊頻道！

另外有需要云服務器可以了解下創新互聯scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業上云的綜合解決方案，具有“安全穩定、簡單易用、服務可用性高、性價比高”等特點與優勢，專為企業上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。