js如何控制css伪元素内容(before,after)

时间:2015-02-05 17:59:17   收藏:0   阅读:3967
原文:js如何控制css伪元素内容(before,after)

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/

原文:http://www.cnblogs.com/lonelyxmas/p/4275167.html

评论(0
© 2014 bubuko.com 版权所有 - 联系我们:wmxa8@hotmail.com
打开技术之扣,分享程序人生!