js,jq改变cssbefore或after的伪类的样式

最新推荐文章于 2024-07-21 02:50:13 发布

dxj124

最新推荐文章于 2024-07-21 02:50:13 发布

阅读量4.8k

点赞数 1

分类专栏： js

本文链接：https://blog.youkuaiyun.com/dxj124/article/details/103817285

版权

js 专栏收录该内容

72 篇文章

订阅专栏

当需要通过JavaScript或jQuery调整CSS伪元素如:before或:after的样式时，由于伪元素不是DOM元素，不能直接选择。解决方案包括：1) 切换元素类名来间接改变样式；2) 动态插入CSS到现有的style文档中；3) 创建新样式表并用JS或jQuery插入文档；4) 使用HTML5 data-属性结合attr()函数实现动态修改。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当我们把样式绑定在伪元素上，但是需要通过js调整这个伪类的样式的时候，CSS伪元素（pseudo elements）不是DOM元素，因此你无法直接选择到它们。这时候操作的方式如下：

html：

<p class="red">Hello,are you kain?</p>

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将其插入到中

var style = 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
$('<style>.red:before{background-color:green}</style>').appendTo('head');

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

在p标签中增加data-attr="red"属性，然后
$('red').attr('data-attr','green');