返回顶部

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

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

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);



-----------------------------------------------------------------------------------------------------------------------------------------------------


自己的代码检验

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>23、提交按钮加载动画效果 </title>
    <link rel="stylesheet" href="../css/font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
    /*将内外边距清除掉*/
    *{
        padding: 0;
        margin: 0;
    }
    body{
        width: 100vw;
        height: 100vh;
        display: grid;
        display: grid;
        grid-template: 1fr/1fr
    }



    button{
        width: 200px;
        height: 50px;
        background: #ecf0f1;
        color:#34495e ;
        border: solid 1px #ddd;
        /*下面的这两句话是使得grid（栅格化布局）中的文本水平居中+垂直居中*/
        justify-self: center;
        align-self: center;


    }

    button::after{
        content: '';
        width: 3px;
        height: 3px;
        /*使得制作影子的这块块级元素变为行内元素*/
        display: inline-block;
       animation-name: none;   /*!!!!!!! animation-name: hd;这个代码可以通过js控制，当点击的时候加上这个动画属性，当不点击的时候就去掉这个动画name*/
        animation-duration: 1s;
        animation-iteration-count: infinite;

    }

    @keyframes hd {
        from{
            box-shadow: none;
        }
        30%{
            box-shadow: 4px 0 0  currentColor;
        }
        60%{
            box-shadow: 4px 0 0 currentColor,11px 0 0 currentColor;
        }
        90%{
            box-shadow: 4px 0 0 currentColor,11px 0 0 currentColor,18px 0 0 currentColor;
        }

    }
    </style>
    <!--animation--->
</head>
<body>

<!--
<div>
</div>
-->

<button class="bu">动态按钮</button>



</body>
<script src="../../MyEcharts/js/jquery.js"></script>
<script type="text/javascript">
    $(".bu").click(function (){
       // alert('00');
     
       document.styleSheets[0].addRule('.bu::after','animation-name:hd');
       document.styleSheets[0].insertRule('.bu::after{animation-name:hd}',0);


    })


</script>
</html>

　　

 

 

方法三：创建一份新的样式表，并使用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');

　　

自己测试过这些方法，都可以解决修改伪类样式，但是都存在局限性，希望给读者能提出更好的解决方法，希望前端能够越来越强大

posted @ 2020-08-27 20:22  fen斗  阅读(1877)  评论(0)  编辑  收藏  举报