js style方式設定元素的樣式

antzone發表於2017-03-29
JS

本章節介紹一下介紹一下如何使用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 otxt=document.getElementById("txt");
  otxt.style.color="blue";
}
</script>
</head>
<body>
螞蟻部落:<input type="text" id="txt" value="softwhy.com"/>
</body>
</html>

以上程式碼是一個style方式設定元素樣式的簡單的程式碼例項。

下面開始對它進行深入一點的介紹:

style方式設定的樣式，其實實在對應的標籤上面新增一個style屬性，所以上面的程式碼就等同於如下方式設定樣式。

[HTML] 純文字檢視 複製程式碼
螞蟻部落:<input type="text" style="color:blue" id="txt" value="softwhy.com"/>

一.在設定和獲取float屬性的注意點:

關於這個注意點這裡就不多介紹了，具體可以參閱javascript使用style方式如何設定和獲取元素的float浮動屬性一章節。

二.獲取樣式屬性值:

上面已經說過，style方式設定元素屬性等同於在標籤內新增style屬性，那麼使用style方式也只能夠獲取由style屬性設定的樣式值。

如果要獲取最終的樣式屬性值可以參閱js獲取元素的樣式值簡單介紹一章節。

三.關於設定符合屬性的注意點:

這裡就不多介紹了，具體可以參閱style方式獲取元素的border和background等符合屬性一章節。

如果要獲取最終的樣式屬性值可以參閱getComputedStyle()函式如何獲取border等符合屬性值一章節。

三.關於屬性名稱:

如果屬性名稱是符合單詞，也就是由多個英文單片語合而成。

那麼這個時候就要使用駝峰寫法，具體可以參閱javascript變數命名規則簡介一章節，裡面的Camel標記法就是所謂的駝峰命名。

程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
odiv.style.borderTopColor

相關文章