javascript的cssText屬性程式碼例項

antzone發表於2017-03-22
JavaScriptCSS

本章節通過例項程式碼介紹一下cssText屬性的用法，希望能夠給需要的朋友帶來幫助。

先來看一段程式碼例項:

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

 以上程式碼可以設定div的樣式值，上面的程式碼稍先繁瑣，因為每一個樣式屬性都必須是一條語句，程式碼修改如下:

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

以上程式碼也可以實現相同的功能，也就是說cssText可以用多行語句的方式實現設定，這樣可以節省很多程式碼量，當然它也是可以獲取使用style設定的指定元素的樣式屬性，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>jQuery.each()-螞蟻部落</title> 
<script type="text/javascript"> 
window.onload=function(){
  var odiv=document.getElementsByTagName("div")[0];
  odiv.innerHTML=odiv.style.cssText;
}
</script> 
</head> 
<body> 
<div style="width:200px;height:200px;background-color:blue"></div>
</body> 
</html>

相關文章