jquery动态修改:after:before伪元素content值 | 您所在的位置:网站首页 › jquery改css样式 › jquery动态修改:after:before伪元素content值 |
总览
一、效果图二、代码区域三、其他
根据昨天做的js动态修改:after:before伪元素content值,今天拓展一些jquery如何绑定动态修改伪类的content的内容,运用到的有( :before 和 :after 伪元素、CSS content 属性、data-* H5新属性、jquery)等技术。 基本原理跟js很相似,不过jquery的方法很简单,只需要一个attr方法就可以实现,不像js还有一步一步等操作,部分方便大家观看,再把基本原理放出来吧。— —+ 基本原理: 1)首先给box盒子添加 [data-content-before=":before"]和[ data-content-after=":after"]属性; 2)其次添加html标签和style样式; 3)在样式里添加box元素的:before伪元素和:after 伪元素; 4):before伪元素和:after 伪元素里各自添加content属性; 5)content 和 attr 配合使用: content: attr(data-content-after);和content: attr(data-content-before); 这样content可以获取到box添加data-content-after属性里的值:after(before同理) 6)最后通过jquery取到box对象,通过box对象attr(attribute,value)“attribute”是属性参数,“value”是要替换内容参数; 以此现在做一个笔记以便以后使用,Hope to help you. 废话不多说,直接上代码 一、效果图![]() ![]() 有小伙伴对js动态修改:after:before伪元素content值实现感兴趣的话,请参考这个网址: https://blog.csdn.net/Mr_LoveJia/article/details/112256396 |
CopyRight 2018-2019 实验室设备网 版权所有 |