微信号:w3ctrain

介绍:w3ctrain官方公众号,定期推送前端资讯.

使用JavaScript修改伪类样式的方法总结

2015-07-21 23:26 Helkyle

项目中时常会需要用到使用JavaScript来动态控制为元素(:before,:after)的样式,但是我们都知道JavaScript或jQuery并没有伪类选择器。这里总结一下几种常见的方法。

HTML

<p class="red">text.</p>

CSS

.red::before { content: 'red'; color: red; }

方法一

使用JavaScript或者jQuery切换<p>元素的类名,修改样式。

.green::before { content: 'green'; color: green; }
$('p').removeClass('red').addClass('green');

方法二

在已存在的<style>中动态插入新样式。

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

方法三

创建一份新的样式表,并使用JavaScript或jQuery将其插入到<head>

var style = document.createElement("style"); document.head.appendChild(style); sheet = style.sheet sheet.addRule('.red::before','color: green'); sheet.insertRule('.red::before { color: green }', 0);

jQuery

$('<style>.red::before{color:green}</style>').appendTo('head');

方法四

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

<p class="red" data-attr="red">text</p>
.red::before { content: attr(data-attr); color: red; }
$('.red').attr('data-attr', 'green');

 
w3ctrain 更多文章 IT圈装逼速成指南 轮播无缝循环思路 使用data URIs 综合指南:何时使用 Em 与 Rem 12个鲜为人知的CSS技能(上)
猜您喜欢 通过Small Basic把儿子/女儿带入编程的世界 2015年“最佳运维图书”评选活动 从Storm到Heron,Twitter的实时计算框架有哪些重大进化? 一个人是否高效,取决于他的思考方式 数人云 | 一场属于 Docker&amp;Mesos 的夏日欢乐颂