使用原生js來控制、修改CSS偽元素的方法總匯, 例如:before和:after

在網頁中，如果需要使用輔助性/裝飾性的內容的時候，我們不應該直接寫在HTML中，這樣會影響真正的內容，這就需要使用偽元素了，這是由於css的純粹語義化是沒有意義的。在使用偽元素的時候，會發現js並不真能直接控制它，這篇文章主要就介紹下如果間接的控制、修改css中偽元素的方法。

 

例如，我的樣式表有以下規則，需要把偽元素的content內容進行修改

<style>
    p:after{content:'after偽元素'}
</style>
<p id="dome">正文內容</p>

設計塢https://www.wode007.com/sites/73738.html

 

方法一：樣式覆蓋

<script>
document.onclick=function(){
    var sty=document.createElement('style');
    sty.innerText='p:after{content:\'修改一下\'}';
    document.body.appendChild(sty);
};
</script>

 

我們直接創建一個style的標簽。它的優缺點：

優點：任何字符串都可以動態插入到樣式中。
缺點：原始風格不改變，只是重寫; 反復使用document.createElement()可以使DOM量增加

 

方法二：class名重寫

添加一個重寫的樣式：

p.special:after {content: "修改一下";}

然后在js中這樣操作它：

<script>
document.onclick=function(){
    var p=document.getElementById('dome');
    p.setAttribute("class","special");
};
</script>

 

我們使用setAttribute()能輕松地添加或刪除這個類。這樣實現的優缺點：

優點：易於實現; 能通過js迅速改變多種風格; 能使用樣式在js中分離出去。
缺點： CSS必須預先寫好，所以偽元素中內容不是完全動態的

 

方法三：使用css中attr()

我們可以在css中使用sttr()來讀取一個特定的DOM屬性，如果你瀏覽器支持偽元素就會支持css中使用attr()。

<style>
p:after {
    content: attr(data-after);
}
</style>

<p id="dome">正文內容</p>
    
<script>
var p=document.getElementById('dome');
p.setAttribute("data-after","我是后綴");//初始值
document.onclick=function(){
    p.setAttribute("data-after","修改一下");
};
</script>

 

在我們想換的內容不確定的時候，使用這個方法是非常值的推薦的。它的優缺點如下：

優點：不會創建無盡的額外風格
缺點： attr()在CSS中只能應用於內容字符串，而不能使用URL或RGB顏色