JS控制CSS伪元素的方法（下）

声明：这个系列文章的下篇转载自博客园，以下是原文标题及链接
js如何控制css伪元素内容（before，after）
http://www.cnblogs.com/yunkou/p/4269974.html?utm_source=tuicool&utm_medium=referral

在做pdfjs预览的功能时遇到了光标选中不是自己想要文字的问题，由此发现了这篇文章，感谢作者的贡献

【简单粗暴的方式】

简单粗暴的方式，直接在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

扫描二维码关注公众号，回复： 3830696 查看本文章

p:after {
    content: attr(data-content);
}

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

css文件

p.change:after {
    content: attr(data-content);
}

js文件

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

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

JS控制CSS伪元素的方法（下）

猜你喜欢