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

时间:2021-05-18

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

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

类如如下的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');

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

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章