如何使用js实现before和after伪类的样式修改
小编给大家分享一下如何使用js实现before和after伪类的样式修改,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
綦江网站制作公司哪家好,找创新互联公司!从网页设计、网站建设、微信开发、APP开发、响应式网站设计等网站项目制作,到程序开发,运营维护。创新互联公司自2013年创立以来到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选创新互联公司。
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伪类的样式修改”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
分享标题:如何使用js实现before和after伪类的样式修改
链接URL:http://scyanting.com/article/ghcppg.html