[1]动态样式

[2]CSS类

[3]setAttribute()

[4]CSSRule对象添加

[5]空样式覆盖

[6]CSSRule对象删除

前面的话

　　我们可以通过计算样式来读取伪元素的样式信息，但是却无法使用javascript来直接操作伪元素，本文以一个需求解决为例，详细介绍脚本化伪元素的6种方法

需求说明

　　【1】为id=box的div元素添加content="前缀"的:before伪元素

　　【2】为已经添加:before伪元素的div元素删除伪元素

　　 [注意]由于IE7-浏览器不支持:before伪元素，所以该需求兼容到IE8

 

添加伪元素

动态样式

　　可以采用动态样式的方法，动态生成

测试文字

利用setAttribute()方法实现自定义伪元素内容

　　若使用方法二，无法自定义伪元素的内容，拓展性不高

　　伪元素的content属性非常强大，它的值可以有以下选择，关于content属性的详细信息移步至此

content:||attr()

　　使用content属性中的attr()值配合setAttribute()方法就可以实现自定义伪元素的内容

　　IE8-浏览器需要在元素特性中出现data-beforeData(设置为空字符串即可)，才有效果；其他浏览器无此问题

测试文字

dataset

　　HTML5新增了dateset数据集特性，将元素特性和对象属性联系在了一起

　　[注意]IE10-浏览器不支持

　　如果不考虑兼容，同样可以实现dateset来实现，但是由于dataset的解释规则，元素特性的值不可以出现大写，需要进行局部修改

　　经测试，IE11浏览器不支持使用dateset动态修改伪元素

测试文字

通过CSSRule对象添加样式

　　虽然伪元素的样式无法通过操作行间样式来直接添加，但是可以通过CSSRule对象通过操作内部样式表实现

　　如果存在内部样式表，即存在

测试文字

通过CSSRule对象删除指定

　　通过selectorText找出CSSRule对象中的:before伪元素的CSS规则

　　[注意]在IE8浏览器中，:before伪元素选择器文本会自动将冒号置为单冒号，而其他浏览器会自动将冒号置为双冒号

　　然后使用deleteRule()方法或removeRule()方法删除指定样式

测试文字

 

最后

　　脚本化CSS系列终于完结了，基本上把使用javascript操作CSS的内容都囊括了

　　【1】脚本化行间样式

　　【2】查询计算样式

　　【3】脚本化CSS类

　　【4】脚本化样式表

　　【5】动态样式

　　【6】脚本化伪元素

　　欢迎交流

文章来源

评论可见，请评论后查看内容，谢谢！！！评论后请刷新页面。