码迷,mamicode.com
首页 > 编程语言 > 详细

使用javascript,jQuery实现修改before,after伪类的样式(转)

时间:2017-10-24 13:18:36      阅读:4479      评论:0      收藏:0      [点我收藏+]

标签:after   red   htm   ddc   code   span   insert   dcl   html5   

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

 

使用javascript,jQuery实现修改before,after伪类的样式(转)

标签:after   red   htm   ddc   code   span   insert   dcl   html5   

原文地址:http://www.cnblogs.com/adhehe/p/7722851.html

(1)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!