javascript使用style方式設定元素的樣式

antzone發表於2017-03-17
JavaScript

在實際編碼中使用style方式動態設定元素的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)用來判斷瀏覽器型別的。

相關文章