cssText 屬性

admin發表於2018-09-02
CSS

元素物件的style屬性大家都比較非常熟悉，利用它可以設定或者返回CSS屬性值。

使用方式簡單，應用頻繁，程式碼例項如下：

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

上述程式碼設定div元素長寬分別為200px和100px，背景顏色為紅色。

關於style屬性更多內容參閱JavaScript style 屬性一章節。

還有一種方式可以實現相同的效果，應用方式也非常類似，那就是本文主角cssText屬性。

style一次只能設定一個CSS樣式屬性值，而cssText可以一次設定多個樣式屬性值。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script> 
window.onload=function(){
  let odiv=document.getElementById("ant");
  odiv.style.cssText = "width:200px;height:100px;background-color:red;";
}
</script>
</head>
<body>
  <div id="ant"></div>
</body>
</html>

效果與使用style屬性逐條設定一樣。

cssText屬性也可以返回設定的CSS樣式，與style屬性類似，並不是所有的CSS樣式都可以返回。

能夠獲取的樣式如下：

（1）.dom物件的style或者cssText設定的樣式。

（2）.內部樣式表設定的樣式。

如果想要暢通無阻的獲取樣式屬性值，可以使用getComputedStyle方法。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
#ant{
  color:blue;
  width:200px;
  height:100px;
}
</style> 
<script> 
window.onload=function(){
  let odiv=document.getElementById("ant");
  odiv.innerHTML = odiv.style.cssText;
}
</script>
</head>
<body>
  <div id="ant" style="background-color:red;"></div>
</body>
</html>

上述程式碼只會獲取通過內聯樣式表設定的CSS樣式，不會獲取內部樣式表設定的CSS樣式。

再來看一段程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
#ant{
  color:blue;
}
</style> 
<script> 
window.onload=function(){
  let odiv=document.getElementById("ant");
  odiv.style.cssText="width:200px;height:100px;";
  odiv.innerHTML = odiv.style.cssText;
}
</script>
</head>
<body>
  <div id="ant" style="background-color:red;"></div>
</body>
</html>

程式碼的表現有點奇怪，只獲取通過cssText設定樣式，內聯方式設定的背景沒有獲取到。

原理解析如下：

（1）.內聯style方式設定背景顏色，內部會建立一個CSSStyleDeclaration物件。

（2）.當文件內容完全載入完畢後，執行odiv.style.cssText="width:200px;height:100px;"，又一次建立CSSStyleDeclaration物件，會覆蓋前一次建立的物件。

（3）.dom.style.color="red"或者dom.style.cssText="color:red;width:200px"等類似操作只是修改CSSStyleDeclaration物件的樣式屬性，而不是全新建立CSSStyleDeclaration物件。

更多CSS操作相關內容可以參閱如下兩篇文章：

（1）.CSSStyleDeclaration物件一章節。

（2）.CSSStyleSheet 物件詳解一章節。

相關文章