使⽤原⽣js来控制、修改CSS伪元素的⽅法总汇，例如：before
和：after
在⽹页中，如果需要使⽤辅助性/装饰性的内容的时候，我们不应该直接写在HTML中，这样会影响真正的内容，这就需要使⽤伪元素了，这是由于css的纯粹语义化是没有意义的。在使⽤伪元素的时候，会发现js并不真能直接控制它，这篇⽂章主要就介绍下如果间接的控制、修改css中伪元素的⽅法。
例如，我的样式表有以下规则，需要把伪元素的content内容进⾏修改
<style>
p:after{content:'after伪元素'}
</style>
<p id="dome">正⽂内容</p>
⽅法⼀：样式覆盖
<script>
var ateElement('style');
sty.innerText='p:after{content:\'修改⼀下\'}';
document.body.appendChild(sty);
};
</script>
我们直接创建⼀个style的标签。它的优缺点：
优点：任何字符串都可以动态插⼊到样式中。
缺点：原始风格不改变，只是重写; 反复使⽤ateElement()可以使DOM量增加
⽅法⼆：class名重写
添加⼀个重写的样式：
1 p.special:after {content: "修改⼀下";}
然后在js中这样操作它：
<script>
var ElementById('dome');
p.setAttribute("class","special");
原生js和js的区别};
</script>
我们使⽤setAttribute()能轻松地添加或删除这个类。这样实现的优缺点：
优点：易于实现; 能通过js迅速改变多种风格; 能使⽤样式在js中分离出去。
缺点： CSS必须预先写好，所以伪元素中内容不是完全动态的
⽅法三：使⽤css中attr()
我们可以在css中使⽤sttr()来读取⼀个特定的DOM属性，如果你浏览器⽀持伪元素就会⽀持css中使⽤attr()。
1 <style>
2 p:after {
3    content: attr(data-after);
4 }
5 </style>
6
7 <p id="dome">正⽂内容</p>
8
9 <script>
10var ElementById('dome');
11 p.setAttribute("data-after","我是后缀");//初始值
lick=function(){
13    p.setAttribute("data-after","修改⼀下");
14 };
15 </script>
在我们想换的内容不确定的时候，使⽤这个⽅法是⾮常值的推荐的。它的优缺点如下：
优点：不会创建⽆尽的额外风格
缺点： attr()在CSS中只能应⽤于内容字符串，⽽不能使⽤URL或RGB颜⾊

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