js如何控制css伪元素内容(before,after)
2017-09-01 14:53
295 查看
曾经遇到的问题,在对抗UC浏览器屏蔽需要把内容输出到css 伪元素中输出。有个疑问如何用js控制它。于是在
如何用js控制css伪类after
简单粗暴的方式,直接在html中添加样式覆盖掉之前样式规则
这样写了功能实现了,优雅欠佳,作为进化版,其实就是用class名来重写样式,
只要在需要的时候,给
上个版本已经解决了切换的问题,如果有更多可以不断的切换
第一种方法就可以了,但是第一种方式真的不是很优雅。还有什么方式呢?
在css中,伪元素的
也就是说我们可以这样写css
在进化版是第二版的变种,
css文件
js文件
这样你就可以随意改动了。
最后一种方法是由bumfod提供方法很hack了,遍历了所有的css文档,找到伪元素,然后更改,有兴趣的同学可以尝试下
http://jsfiddle.net/s3fv8e5v/4/
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/
相关文章推荐
- js如何控制css伪元素内容(before,after)
- js如何控制css伪元素内容(before,after)
- jQuery如何向HTML添加指定的内容,append() ,prepend() ,after(),before()
- 关于如何用js来控制iframe里面的内容
- js修改:before、:after的内容
- CSS伪元素选择器:before和:after
- jQuery对内容的获取,添加,移动的.append(), .html(), .prepend(), .after(), .before()
- 如何控制DataGrid里的内容换行与不换行?
- JS如何控制checkbox的全选反选
- underscore.js中如何判断两个对象的内容相同
- js控制搜索内容为空则搜索按钮不能用
- 三个分享——异步流程控制 / Modern Node.js/Java项目如何与Node.js共存
- 动态生成的内容,如何控制布局
- 如何在网页中通过js代码将内容分享到朋友圈?
- CSS伪元素--:after-:before的炫酷用法
- js和php如何获取当前url的内容
- 如何使用C#在发送往client的内容上加js代码(转)
- 在网页中如何使用JS控制input只能输入数字
- js控制href内容的连接内容的变化
- 如何用JS获取键盘上任意按键的值?兼容FireFox和IE js获取键盘ASCII码?js键盘事件全面控制