js style.cssText用法簡單介紹

antzone發表於2017-03-22
JSCSS

使用js動態設定元素的樣式的時候通常使用domObj.style方式，程式碼例項如下:

[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");
  odiv.style.width="100px";
  odiv.style.height="100px";
  odiv.style.backgroundColor="green";
}
</script> 
</head> 
<body> 
<div id="thediv"></div>
</body> 
</html>

如果要設定的屬性過多的話，可能會導致程式碼是否冗雜，而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 styleStr="width:100px;height:100px;background-color:green";
  odiv.style.cssText=styleStr;
}
</script> 
</head> 
<body> 
<div id="thediv"></div>
</body> 
</html>

以上程式碼實現了我們的要求，就是能夠將樣式程式碼寫在一起。

相關文章