前端开发js如何控制CSS伪元素(before,after)

深圳 web前端开发
宁波web前端开发招聘
前端开发招聘天津

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

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

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

如何用js控制css伪类after

简单粗暴的方式:

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

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名来重写样式,

css 代码

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

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

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

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

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

css 代码

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

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

css文件

css 代码

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

js文件

javascript 代码

$(this)
    .addClass(‘change’)
    .attr(‘data-content’, content)

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

胶州前端开发招聘
河源 前端开发 招聘
广州web前端开发招聘
» 本文来自:前端开发者 » 《前端开发js如何控制CSS伪元素(before,after)》
» 本文链接地址:https://www.rokub.com/7285.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!