课程咨询 :0571-56020837 QQ:162156527

达内名师推荐就业,先就业后付款

  • 达内:JavaScript修改伪类样式

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


  •     杭州达内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游戏引擎及框架

新开班日期  |  更多

.NET培训—零基础周末班

.NET培训—零基础周末班

开班日期:每月28日

.NET培训—零基础全日制

.NET培训—零基础全日制

开班日期:每月28日

.NET培训工程师班--周末班

.NET培训工程师班--周末班

开班日期:每月28日

.NET培训工程师班--全日制

.NET培训工程师班--全日制

开班日期:每月28日

  • 地址:杭州市西湖区教工路6-8号求是大厦10层
  • 课程培训电话:0571-56020837 QQ:162156527     全国服务监督电话:400-111-8989
  • 服务邮箱 tousu@tedu.cn
  • 2001-2016 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56