js dom元素樣式設定相關style屬性介紹

antzone發表於2017-03-26
JS

通過js操作元素的css樣式方式有很多中，大家比較熟悉的一種是通過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.color="blue";
  odiv.style.fontSize="28px";
}
</script>  
</head>  
<body>  
<div id="thediv">螞蟻部落</div>
</body>  
</html>

上面的程式碼可以通過style的方式設定div中的字型顏色為藍色，大小為28px。

當然也可以通過style方式獲取通過style嵌入方式定義的樣式屬性值，相信很多朋友對它的瞭解也就僅限於此，下面再對它做一下進步的簡單介紹，style屬性返回的其實是一個CSSStyleDeclaration物件，此物件包含了所有的元素所具有的css樣式屬性，截圖如下:

a:3:{s:3:\"pic\";s:43:\"portal/201703/26/171645dqsbvsyz4ciyssyb.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

這樣看，也許就更能理解style的操作了，更多相關內容可以參閱document.styleSheets與CSSStyleSheet一章節。

相關文章