在网页中,如果需要使用辅助性/装饰性的内容的时候,我们不应该直接写在HTML中,这样会影响真正的内容,这就需要使用伪元素了,这是由于css的纯粹语义化是没有意义的。在使用伪元素的时候,会发现js并不真能直接控制它,这篇文章主要就介绍下如果间接的控制、修改css中伪元素的方法。
例如,我的样式表有以下规则,需要把伪元素的content内容进行修改
1 <style> 2 p:after{content:‘after伪元素‘} 3 </style> 4 <p id="dome">正文内容</p>
设计坞https://www.wode007.com/sites/73738.html
方法一:样式覆盖
1 <script> 2 document.onclick=function(){ 3 var sty=document.createElement(‘style‘); 4 sty.innerText=‘p:after{content:\‘修改一下\‘}‘; 5 document.body.appendChild(sty); 6 }; 7 </script>
我们直接创建一个style的标签。它的优缺点:
优点:任何字符串都可以动态插入到样式中。
缺点:原始风格不改变,只是重写; 反复使用document.createElement()可以使DOM量增加
方法二:class名重写
添加一个重写的样式:
p.special:after {content: "修改一下";}
然后在js中这样操作它:
1 <script> 2 document.onclick=function(){ 3 var p=document.getElementById(‘dome‘); 4 p.setAttribute("class","special"); 5 }; 6 </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> 10 var p=document.getElementById(‘dome‘); 11 p.setAttribute("data-after","我是后缀");//初始值 12 document.onclick=function(){ 13 p.setAttribute("data-after","修改一下"); 14 }; 15 </script>
在我们想换的内容不确定的时候,使用这个方法是非常值的推荐的。它的优缺点如下:
优点:不会创建无尽的额外风格
缺点: attr()在CSS中只能应用于内容字符串,而不能使用URL或RGB颜色