js如何獲取css偽類選擇器樣式值程式碼例項

admin發表於2017-03-28
JSCSS

隨著瀏覽器版本的提高，css的偽類選擇器的出現頻率也越來越高。

下面通過程式碼例項介紹一下如何獲取偽類選擇器的值，希望能夠給需要的朋友帶來幫助。

程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#test:before{   
  content:'softwhy';   
  color:green;
  text-align:center;
  font-size:12px;
}
</style>
<script type="text/javascript">
window.onload=function(){
  var odiv=document.getElementById("antzone");
  var oshow=document.getElementById("show");
  var content=window.getComputedStyle(document.querySelector('#test'),':before')   
  .getPropertyValue('content');
  oshow.innerHTML=content;
}
</script>
</head>
<body>
<div id="show"></div>
<div id="test">螞蟻部落</div>
</body>
</html>

上面的程式碼實現了我們的要求，可以將獲取偽類選擇器設定的content屬性值的內容。

當然此種方式只有標準瀏覽器和IE9+瀏覽器支援。

querySelector()函式可以參閱querySelector()一章節。

相關文章