本文介紹了使用javascript,jQuery實(shí)現(xiàn)修改before,after偽類的樣式，分享給大家，具體如下：

最近遇到一個(gè)需要改變:before,:after 偽類的樣式，發(fā)現(xiàn)css中并不能直接選擇某一個(gè)元素的:before和:after偽類元素，所以特總結(jié)了使用javascript和jQuery改變?cè)氐?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文檔中動(dòng)態(tài)插入樣式

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

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

3.創(chuàng)建一份新的樣式表，并使用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()動(dòng)態(tài)修改。

在p標(biāo)簽中增加data-attr="red"屬性，然后

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

總結(jié)

以上是生活随笔為你收集整理的伪类如何动态在html设置样式,用js实现before和after伪类的样式修改的示例代码的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。