如何動態刪除css的偽物件選擇器程式碼例項

antzone發表於2017-04-02
CSS物件

由於偽物件選擇的器的特殊性和瀏覽器相容性問題，可能使用的頻率不是太高。

但是隨著時間的推移，相容性問題逐漸消除之後，它的應用會越來越廣泛。

下面分享一段程式碼例項，它實現因為指定元素上的偽物件選擇器。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css"> 
.antzone::after{ 
  content:"softwhy.com"; 
} 
.no-after::after{
  display:none;
}
</style> 
<script>
window.onload=function(){
  var odiv=document.getElementById("antzone");
  var obt=document.getElementById("bt");
  obt.onclick=function(){
    odiv.classList.add("no-after");
  }
}
</script>
</head> 
<body> 
<div id="antzone" class="antzone">螞蟻部落|</div> 
<input type="button" id="bt" value="檢視效果"/>
</body> 
</html>

實現的原理也非常的簡單，就是再為物件設定一個偽物件選擇器覆蓋原來的即可。

相關閱讀:

（1）.classList屬性可以參閱HTML5 classList屬性一章節。

（2）.add()方法可以參閱HTML5 classList add()一章節。

相關文章