⽤js实现before和after伪类的样式修改的⽰例代码
本⽂介绍了使⽤javascript,jQuery实现修改before,after伪类的样式，分享给⼤家，具体如下：
最近遇到⼀个需要改变:before,:after 伪类的样式，发现css中并不能直接选择某⼀个元素的:before和:after伪类元素，所以特总结了使⽤javascript和jQuery改变元素的:before和:after伪类样式的⽅法。
类如如下的html及样式
<p class="red">Hello,are you kain?</p>
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 = atElement('style');
document.head.appendChild(style);
sheet = style.sheet;
sheet.addRule('.red:before','background-color:green');
jquery自动轮播图代码sheet.insertRule('.red:before{background-color:green}',0);
// jQuery
$('<style>.red:before{background-color:green}</style>').appendTo('head');
4.使⽤HTML5的data-属性，在属性中使⽤attr()动态修改。
在p标签中增加data-attr="red"属性，然后
$('red').attr('data-attr','green');
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。