原生javascript獲取元素樣式

2021-07-10 08:54:29 字數 2356 閱讀 4160

摘要:

我們在開發過程中經常會遇到通過js獲取或者改變dom元素的樣式,方法有很多,比如:通過更改dom元素的class。現在我們討論原生js來獲取dom元素的css樣式,注意是獲取不是設定

在開始之前先說下獲取最終應用在元素上的所有css屬性物件的意思是,如果沒有給元素設定任何樣式,也會把瀏覽器預設的樣式返回來。

1、ele.style

在學習dom的時候就看到通過ele.style來獲取元素樣式值,但是有時候獲取的並非是節點的樣式值,而是空值。這是因為ele.style只能獲取寫在元素標籤中的style屬性裡的樣式值,無法獲取到定義在和通重載入進來的樣式屬性

例子:複製**

**如下:

var test = document.getelementbyid("test");

//獲取節點的color

test.style.color;

2、getcomputedstyle()

getcomputedstyle是乙個可以獲取當前元素所有最終使用的css屬性值。

語法如下:

window.getcomputedstyle("元素", "偽類");

這個方法接受兩個引數:要取得計算樣式的元素和乙個偽元素字串(例如「:before」) 。如果不需要偽元素資訊,第二個引數可以是null。也可以通過document.defaultview.getcomputedstyle("元素", "偽類");來使用

例子:複製**

**如下:

var test = document.getelementbyid("test"),

demo = window.getcomputedstyle(test, null);

//獲取節點的color

demo.color 

注意:firefox和safari會將顏色轉換成rgb格式,如果test節點上沒有任何樣式,通過style.length來檢視瀏覽器預設樣式的個數。ie6-8不支援該方法,需要使用下面的方法

3、ele.currentstyle

currentstyle是ie瀏覽器自己的乙個屬性,其語法與ele.style類似,差別在於element.currentstyle返回的是元素當前應用的最終css屬性值(包括外鏈css檔案,頁面中嵌入的屬性等)。

語法:var style = dom.currentstyle;

例子:複製**

**如下:

var test = document.getelementbyid("test"),

demo = test.currentstyle;

//獲取節點的color

demo.color;

注意:對於綜合屬性border等,ie返回undefined,其他瀏覽器有的返回值,有的不返回,但是borderleftwidth這樣的屬性是返回值的

4、getpropertyvalue()

getpropertyvalue獲取css樣式的直接屬性名稱

語法如下:

window.getcomputedstyle(element, null).getpropertyvalue(屬性)

例子:複製**

**如下:

var test = document.getelementbyid('test');

window.getcomputedstyle(test, null).getpropertyvalue("background-color");

注意:屬性名不支援駝峰格式,ie6-8不支援該方法,需要使用下面的方法

5、getattribute

getattribute與getpropertyvalue類似,有一點的差異是屬性名駝峰格式

例子:複製**

**如下:

var test = document.getelementbyid('test');

window.getcomputedstyle(test, null).getpropertyvalue("backgroundcolor");

注意:該方法只支援ie6-8

小結:jquery的css()方法,其底層運作就應用了getcomputedstyle以及getpropertyvalue方法,當我們使用原生的js開發時就可以通過以上方法獲取元素的值。

下面是乙個相容ie,firefox,chrome等瀏覽器的獲取元素樣式的方法,可以應用到專案中

複製**

**如下:

function getstyle(ele) else

return style;

}

javascript原生DOM知識總結

dom是 document object model的縮寫,也就是文件物件模型的意思,它是一種用於html和xml文件的程式設計介面。它給文件提供了一種結構化的表示方法,可以改變文件的內容和呈現方式。上面對dom的解釋比較官方不易理解,用我自己的話來解釋的話 網頁是由一系列的html組成,如果把每乙...

用原生JavaScript寫AJAX

原生js寫ajax就像打 打 分下面4步 1.拿出手機 2.撥號 3.說話 4.聽對方說話 ajax也分下面4步 1.建立ajax物件 2.連線到伺服器 3.傳送請求 告訴伺服器我要什麼檔案 4.接收返回值 但是,不能每次用ajax的時候都寫那麼多 要把這段ajax 封裝起來,方便使用。最後把 封裝...

用原生JavaScript寫AJAX

ajax分下面4步 1.建立ajax物件 2.連線到伺服器 3.傳送請求 告訴伺服器我要什麼檔案 4.接收返回值 但是,不能每次用ajax的時候都寫那麼多 要把這段ajax 封裝起來,方便使用。封裝ajax 最後把 封裝起來,封裝起來以後,要給這個函式加上乙個引數url.引數是為了替換要讀取的檔名 ...