JS之獲取屬性總結

2022-05-03 20:36:10 字數 1566 閱讀 8958

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

首先什麼是屬性呢,比如input標籤,標籤中的value id type style等,這些就是屬性。我們js獲取屬性一般有三種方法:

1  通過點的方式

2 通過括號的形式

3 通過 dom的方式

通過栗子說明:

"

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訪問

var otext = document.getelementbyid("text")

//ie下可以這樣用:otext.style.getattribute('width') 標準瀏覽器不可以

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

JS獲取CSS屬性值

obj.style方法,這個方法只能js只能獲取寫在html標籤中的寫在style屬性中的值 style 看一下 code x m,m0 u7 l i8 y0 j 3 n l n f y r c.q i z o 5 q u g p8 i js獲取css屬性值 u8 w o5 t z a c3 k i...

js獲取和設定屬性

function square num var total 50 全域性變數 var number square 20 alert total 結果為50 function square num var total 50 全域性變數 var number square 20 alert total ...

js 獲取深度屬性值

類似lodash.get可以按path來取物件的值,同時也支援預設值,如下 可參考lodash中的get方法 lodash.get的簡單實現 param object param path param defaultvalue deepget object,path,defaultvalue k o...