style.cssText用法簡單介紹

antzone發表於2017-03-26
CSS

雖然標題是style.cssText的用法，其實這裡介紹的是cssText的用法。

在實際應用中還是標題中的形式用法比較多，先看一段程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<script type="text/javascript">  
window.onload=function(){
  var odiv=document.getElementById("thediv");
  var cssText="font-size:28px;color:red";
  odiv.style.cssText=cssText;
}
</script>  
</head>  
<body>  
<div id="thediv">螞蟻部落</div>
</body>  
</html>

上面的程式碼可以將div的字型大小設定為28px，字型顏色為紅色。

從上面的程式碼可以看出使用cssText屬性可以一次性設定多個css樣式屬性，而不必要像下面的方式一個屬性一行:

[JavaScript] 純文字檢視 複製程式碼
odiv.style.fontSize="28px";
odiv.style.color="red";

特別說明:

在把IE8和IE8以下的瀏覽器中，cssText會自動將樣式內容轉換為大寫，而在標準瀏覽器中則是小寫。

相關文章