js如何控制css伪元素内容(before,after)
来源:互联网 发布:tomcat启动端口被占用 编辑:程序博客网 时间:2024/05/29 04:45
曾经遇到的问题,在对抗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/
阅读全文
0 0
- js如何控制css伪元素内容(before,after)
- CSS伪元素 :before :after
- 伪类“:before”,“:after”和伪元素“::before”、“::after”-CSS生成内容
- css 伪元素(before,after,first-letter,first-line)
- CSS伪元素选择器:before与:after
- CSS伪元素样式 :before 和 :after
- CSS ::before 和 ::after 伪元素用法
- CSS伪元素选择器:before和:after
- css before和after伪元素应用
- 【:before与:after】css的伪类与伪元素
- 伪元素 :before 与 :after(10.19)
- 伪元素(2)-理解伪元素 :before 和 :after
- CSS中的before和after伪元素及其应用
- CSS伪元素BEFORE、AFTER妙用:制作时尚焦点图相框
- CSS伪元素before、after妙用:制作时尚焦点图相框
- CSS中的before和after伪元素及其应用
- JavaScript修改CSS伪元素:after和:before的样式
- css中伪元素:before :after的作用
- 老罗不跟罗振宇玩了,8月最好看的电影 | 数据周报
- JavaScript浮点数(加,减,乘,除)方法
- ios自绘UIView进度条及刷新重影解决
- java并发编程
- kotlin
- js如何控制css伪元素内容(before,after)
- Django之Model操作
- pragma warning
- 面试的妹纸问我:web缓存设置不是后台的事情吗?
- 98. Validate Binary Search Tree(通过确定上下界进行递归)
- Android绘制中requestLayout,invalidate和postInvalidate的异同
- 时间有泪:爱是一场误会,痛是一场修为
- Spring带附件邮件发送示例
- 数值优化(Numerical Optimization)学习系列(二)-无约束优化的基础