使用JavaScript修改偽類樣式的方法
阿新 • • 發佈：2020-08-27
專案中時常會需要用到使用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');
自己測試過這些方法，都可以解決修改偽類樣式，但是都存在侷限性，希望給讀者能提出更好的解決方法，希望前端能夠越來越強大