CSSStyleDeclaration length 屬性

admin發表於2018-11-02
CSS

首先問題是搞清楚CSSStyleDeclaration表示的是什麼。

它表示一個CSS規則的宣告部分，程式碼如下：

[CSS] 純文字檢視 複製程式碼
#ant{
  width:100px;
  height:100px;
  background-color:#ccc;
}

上面是一個CSS規則，CSSStyleDeclaration代表的是CSS宣告部分，也就是大括號裡面的內容。

關於CSSStyleDeclaration更多內容參閱CSSStyleDeclaration物件一章節。

CSSStyleDeclaration物件的length屬性可以返回CSS規則的宣告中CSS屬性的條數。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
#ant {
  width:100px;
  height:100px;
  text-align:center;
  line-height:100px;
}
</style>
<script>
window.onload = function () {
  let odiv = document.getElementById("ant");
  odiv.style.backgroundColor = "#ccc";
  odiv.style.marginLeft = "10px";
  odiv.innerHTML = odiv.style.length;
}
</script>
</head>
<body>
<div id="ant"></div>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201811/02/193208xere8ecc3cykr00f.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

可能很多朋友對這個數字2有所質疑，因為設定在div元素上的CSS屬性不止2條。

分析如下：

（1）.odiv.style返回一個CSSStyleDeclaration物件。

（2）.但是通過style返回的CSSStyleDeclaration物件只包含通過style方式設定的CSS屬性。

（3）.所以length返回值是2。再來看一段程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
#ant {
  width:100px;
  height:100px;
  text-align:center;
  line-height:100px;
}
</style>
<script>
window.onload = function () {
  let odiv = document.getElementById("ant");
  odiv.style.backgroundColor = "#ccc";
  odiv.style.marginLeft = "10px";
  odiv.style.marginLeft = "20px";
  odiv.innerHTML = odiv.style.length;
}
</script>
</head>
<body>
<div id="ant"></div>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201811/02/193240nbz9zaec0k23ba11.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

如果重複設定同一個CSS屬性，那麼這些屬性會合併成一個。

所以上述程式碼length屬性返回值依然是2。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
#ant {
  width:100px;
  height:100px;
  text-align:center;
  line-height:100px;
  border:2px solid red;
}
</style>
<script>
window.onload = function () {
  let odiv = document.getElementById("ant");
  odiv.style.backgroundColor = "#ccc";
  odiv.style.marginLeft = "10px";
  let declaration=getComputedStyle(odiv,null);
  odiv.innerHTML = declaration.length;
  console.log(declaration);
}
</script>
</head>
<body>
<div id="ant"></div>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201811/02/193319uwdl6eds0pcygcdy.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.getComputedStyle方法可以返回一個CSSStyleDeclaration物件。

（2）.getComputedStyle方法獲取的是元素最終的CSS樣式屬性值，包括各種預設的屬性值。

（3）.所以length屬性值為280並不奇怪。

以下是控制檯列印效果截圖：

a:3:{s:3:\"pic\";s:43:\"portal/201811/02/193337yj88z5e7vhjjkwjm.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

僅僅是截圖的一小部分，權做演示。

由上面兩段程式碼可以看出，CSSStyleDeclaration物件包括的CSS屬性條數在不同的情況下有所不同。

再看一下如何獲取樣式表指定規則中的CSS屬性的條數，以#ant選擇器建立的CSS規則為例。

程式碼如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
#ant {
  width:100px;
  height:100px;
  text-align:center;
  line-height:100px;
}
</style>
<script>
window.onload = function () {
  let odiv = document.getElementById("ant");
  odiv.style.backgroundColor = "#ccc";
  odiv.style.marginLeft = "10px";
  let declaration=document.styleSheets[0].cssRules[0].style;
  odiv.innerHTML = declaration.length;
}
</script>
</head>
<body>
<div id="ant"></div>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201811/02/193413xfdvvyiijx8diiii.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

的確#ant中具有4個CSS屬性的宣告，length屬性值為4很正常。

為div新增一個邊框屬性，程式碼修改如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
#ant {
  width:100px;
  height:100px;
  text-align:center;
  line-height:100px;
  border:2px solid red;
}
</style>
<script>
window.onload = function () {
  let odiv = document.getElementById("ant");
  odiv.style.backgroundColor = "#ccc";
  odiv.style.marginLeft = "10px";
  let declaration=document.styleSheets[0].cssRules[0].style;
  odiv.innerHTML = declaration.length;
  console.log(declaration);
}
</script>
</head>
<body>
<div id="ant"></div>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201811/02/193452dha8rtlwgdw8erzh.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

只多了一個關於邊框的設定，但是列印結果讓人匪夷所思，21條。

控制檯列印效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/02/193510vnv6nrfbjgbjnf25.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

很簡單，因為border是複合屬性，CSSStyleDeclaration中的CSS屬性會進行拆分。

雖然僅設定了邊框粗細、顏色和型別，但畢竟是針對border的設定，而針對border的CSS屬性可以細分為多個。

相關文章