js before和after伪类修改 用js实现before和after伪类的样式修改的代码实例
wksmile 人气:3想了解用js实现before和after伪类的样式修改的代码实例的相关内容吗,wksmile在本文为您仔细讲解js before和after伪类修改的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:js修改伪类样式,js,设置伪类样式,js控制伪类样式,下面大家一起来学习吧。
本文介绍了使用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');
加载全部内容