好资源导航 » 文章资讯 » 用js实现before和after伪类的样式修改的示例代码

用js实现before和after伪类的样式修改的示例代码

2023-09-25 02:32:05 46

本文介绍了使用javascript,jQuery实现修改before,after伪类的样式，分享给大家，具体如下：

最近遇到一个需要改变:before,:after伪类的样式，发现css中并不能直接选择某一个元素的:before和:after伪类元素，所以特总结了使用javascript和jQuery改变元素的:before和:after伪类样式的方法。

类如如下的html及样式

Hello,areyoukain?

css样式

.red:before{
content:'red',
background-color:red
}

1.使用javascript或者jQuery切换，增加元素的类

.green:before{
content:'green';
background-color:green;
}

$('p').addClass('green');

2.在存在的style文档中动态插入样式

document.styleSheet[0].addRule('.red:before','background-color:green');
document.styleSheet[0].insertRule('.red:before{background-color:green}',0);

3.创建一份新的样式表，并使用JavaScript或jQuert将其插入到中

varstyle=document.creatElement('style');
document.head.appendChild(style);
sheet=style.sheet;
sheet.addRule('.red:before','background-color:green');
sheet.insertRule('.red:before{background-color:green}',0);

//jQuery
$('').appendTo('head');

4.使用HTML5的data-属性，在属性中使用attr()动态修改。

在p标签中增加data-attr="red"属性，然后

$('red').attr('data-attr','green');

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

用js实现before和after伪类的样式修改的示例代码

热门推荐

随机推荐