杭州.net培训
达内杭州.net培训中心

0571-56020837

热门课程

达内:JavaScript修改伪类样式

  • 时间:2015-12-07
  • 发布:杭州.NET培训
  • 来源:慕课社区


    杭州达内net培训专家表示,我们有时需要JavaScript来动态控制为元素(:before,:after)的样式,但是问题在于JavaScript或jQuery并没有伪类选择器,那么有什么方法能以JavaScript修改伪类样式呢?

HTML 

<p class="red">Hi, this is a plain-old, sad-looking paragraph tag.</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>中

// Create a new style tag
var style = document.createElement("style");

// Append the style tag to head
document.head.appendChild(style);

// Grab the stylesheet object
sheet = style.sheet

// Use addRule or insertRule to inject styles
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">Hi, this is plain-old, sad-looking paragraph tag.</p>
.red::before {
    content: attr(data-attr);
    color: red;
}
$('.red').attr('data-attr', 'green');


上一篇:ASP.NET 5 程序员的五个阶段
下一篇:优秀的HTML5、JavaScript 3D游戏引擎及框架

795万高校毕业生创历史新高,2017届毕业生就业近况几何?

内副总裁齐一楠接受新浪专访,解读2016达内耀升级

达内教育总裁韩少云受邀出席GIE国际教育峰会做主题演讲

达内教育集团总裁韩少云:回归本质, 打铁还需自身硬

选择城市和中心
贵州省

广西省

海南省