DDR爱好者之家

用js实现before和after伪类的样式修改的示例代码
站长资源 2024/11/27 佚名
24 1538
DDR爱好者之家 Design By 杰米

本文介绍了使用javascript,jQuery实现修改before,after伪类的样式，分享给大家，具体如下：

最近遇到一个需要改变:before,:after 伪类的样式，发现css中并不能直接选择某一个元素的:before和:after伪类元素，所以特总结了使用javascript和jQuery改变元素的:before和:after伪类样式的方法。

类如如下的html及样式

<p class="red">Hello,are you kain"htmlcode">



.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
$('<style>.red:before{background-color:green}</style>').appendTo('head');






4.使用HTML5的data-属性，在属性中使用attr()动态修改。


在p标签中增加data-attr="red"属性，然后







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





以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米