getPropertyValue() 方法

admin發表於2018-11-08

getPropertyValue由三個單詞構成：

（1）.get：獲取。

（2）.property：屬性。

（3）.value：值。

功能的確也名副其實，此方法可以獲取指定屬性的值。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
let value = CSSStyleDeclaration.getPropertyValue(propertyName);

引數解析：

（1）.CSSStyleDeclaration：此物件表示CSS規則的主體部分，也就是大括號內的部分。

（2）.propertyName：必需，要獲取值的CSS屬性。

再來分析一下CSS的組成部分，程式碼片段如下：

[CSS] 純文字檢視 複製程式碼
div{
  width:100px;
  height:60px;
}

結構分解如下：

（1）.整體是一個CSS規則。

（2）.大括號是CSS的宣告部分。

（3）.width與height就是CSS宣告中的屬性定義。

CSSStyleDeclaration物件可以參閱CSSStyleDeclaration物件一章節。

瀏覽器支援：

（1）.IE瀏覽器支援此方法。

（2）.edge瀏覽器支援此方法。

（3）.谷歌瀏覽器支援此方法。

（4）.火狐瀏覽器支援此方法。

（5）.opera瀏覽器支援此方法。

（6）.safria瀏覽器支援此方法。

程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{
  width:100px;
  height:60px;
  text-align:center;
  line-height:60px;
  background-color:#ccc;
}
</style>
<script>
window.onload=function(){
  let declaration = document.styleSheets[0].cssRules[0].style;
  let value = declaration.getPropertyValue('width');
  let odiv=document.getElementsByTagName("div")[0];
  odiv.innerHTML=value;
}  
</script>  
</head>
<body>
  <div></div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/08/005336xlc1lsqyj0jjbj1j.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

相關文章