js如何控制css伪元素内容（before，after）

@(CSS 笔记)[伪元素|css3]

 

曾经遇到的问题，在对抗UC浏览器屏蔽需要把内容输出到css 伪元素中输出。有个疑问如何用js控制它。于是在 segmentfault 提问，如下是对问题的整理：

 

如何用js控制css伪类after

 

简单粗暴的方式：

 

简单粗暴的方式，直接在html中添加样式覆盖掉之前样式规则

 

<style>

  p:after{content:'我是后缀'}

</style>

<p>正文内容</p>

<script>

var css=function(t,s){

  s=document.createElement('style');

  s.innerText=t;

  document.body.appendChild(s);

};

document.onclick=function(){

  css('p:after{content:\'修改一下\'}');

};

</script>

 

进化版

 

这样写了功能实现了，优雅欠佳，作为进化版，其实就是用class名来重写样式，

 

p:after{content:'我是后缀'}

p.change{content:'我是修改过的后缀'}

只要在需要的时候，给 p 标签添加 change 这个class就可以实现替换的目的。原理和第一个没什么区别。这样写的好处是，改变起来更优雅灵活，用class做了个钩子。

 

再进化版

 

上个版本已经解决了切换的问题，如果有更多可以不断的切换 class ，但是想下这种方式也还是有点笨重，因为可能要写很多css，如果是想换的内容是不确定的，需要用变量来处理呢？这时候，可能会想到用第一种方法就可以了，但是第一种方式真的不是很优雅。还有什么方式呢？

 

在css中，伪元素的 content 是能读取到data属性的。

 

也就是说我们可以这样写css

 

p:after {

  content: attr(data-content);

}

再进化版是第二版的变种，

 

css文件

 

p.change:after {

  content: attr(data-content);

}

js文件

 

$(this).addClass('change').attr('data-content', content);

这样你就可以随意改动了。

 

不是终极版的终极版

 

最后一种方法是由 bumfod 提供方法很hack了，遍历了所有的css文档，找到伪元素，然后更改，有兴趣的同学可以尝试下：http://jsfiddle.net/s3fv8e5v/4/