JavaScript style 屬性

antzone發表於2018-05-27
JavaScript

使用此屬性可以設定元素的CSS樣式。

程式碼例項:

[JavaScript] 純文字檢視 複製程式碼
divObj.style.width="100px"

以上程式碼可以將一個元素的寬度設定為100px。

一.對於沒有中劃線的CSS屬性:

如果是類似於width和height這樣沒有中劃線的CSS屬性，使用就比較直接。

[JavaScript] 純文字檢視 複製程式碼
divObj.style.width="100px";
divObj.style.height="20px";

二.對於帶有中劃線的CSS屬性:

在CSS中有很多屬性是帶有中劃線的，例如background-color、z-index等，使用原則就是將中劃線去掉，然後將中劃線後的單詞第一個字母大寫，程式碼例項如下:

[JavaScript] 純文字檢視 複製程式碼
divObj.style.backgroundColor="#ccc";
divObj.style.zIndex=5;

三.關於一些特殊的CSS屬性:

float屬性比較特殊，是ECMAScript保留字，所以不能直接使用，下面介紹一下在各個瀏覽器中的使用方式:

（1）.IE瀏覽器中，使用以下方式:

[JavaScript] 純文字檢視 複製程式碼
thediv.style.styleFloat="right";

（2）.在谷歌和火狐瀏覽器中，使用以下方式:

[JavaScript] 純文字檢視 複製程式碼
thediv.style.cssFloat="right";

以上方式IE9和IE9以上瀏覽器也是支援的。

程式碼例項:

[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 thediv=document.getElementById("thediv");
  thediv.style.width="100px";
  thediv.style.height="30px";
  thediv.style.backgroundColor="red";
  if(document.all){
    thediv.style.styleFloat="right";
  }
  else{
    thediv.style.cssFloat="right";
  }
}
</script>
</head>
  
<body>
<div id="thediv"></div>
</body>
</html>

以上程式碼可以設定div的尺寸、背景顏色和浮動方向，程式碼比較簡單。 

特別說明：if(document.all)用來判斷低版本瀏覽器型別的。

相關文章