JS之獲取屬性總結

       嗨，我是沐晴，今天來說說JS中關於獲取屬性的一些方法和區別。閑話不說，來正題。

      首先什么是屬性呢，比如input標簽，標簽中的value id type style等，這些就是屬性。我們JS獲取屬性一般有三種方法：

    1  通過點的方式

    2 通過括號的形式

    3 通過 DOM的方式

通過栗子說明：

<input type="text" value="hello" id="text"/>
var oText = document.getElementById("text")

1  通過點的方式    oText.value    

需要注意的是：

1  點要查找的是JS中本來就存在的屬性名，不能找到變量或者函數的參數。比如下面

增加代碼：
var  name = "value"
oText.name    
//這種方式訪問就會出錯，因為點的方式訪問，它會去input的標簽里面直接到有沒有name的屬性，如果沒有就找不到，所以訪問不到我們定義的這個變量的值    
//而且如果name是某個函數的參數也不可以獲取到，原理是一樣的。所以封裝函數屬性需要作為參數的時候，訪問的時候不要用點，用括號

 2  標准瀏覽器下無法訪問html中的自定義屬性，可以獲取通過JS參加的自定義屬性

 3  無法獲取相對網址  比如img.src  獲取的只是絕對路徑

2 通過括號的形式   oText.value 

  1可以訪問任何變量，也可以訪問參數

 2  標准瀏覽器下無法訪問html中的自定義屬性，可以獲取通過JS參加的自定義屬性（同上）

 3  無法獲取相對網址  比如img.src  獲取的只是絕對路徑（同上）

3 通過DOM的方式

  涉及到三個方法

獲取屬性的值：getAttribute(屬性名) oText.getAttribute('value')
設置屬性的值：setAttribute(屬性名, 要設置的值) oText.setAttribute('value','hello')
刪除：removeAttribute(屬性名) oText.getAttribute('value')

 

相比於上面的優勢：

1 可以獲取html中自定義的屬性

2 獲取的是相對網址，不過 IE7以下還是絕對網址

3 IE下可以通過style訪問

 

<input type='text' style='width:100px;' />
var oText = document.getElementById("text")
//IE下可以這樣用：oText.style.getAttribute('width') 標准瀏覽器不可以

 

 

一般情況下，用第三種方法的時候並不多，所以能用簡單的方法就用簡單的，按需要使用。。。。