我們在開發過程中經常會遇到通過js獲取或者改變DOM元素的樣式,方法有很多,比如:通過更改DOM元素的class。現在我們討論原生js來獲取DOM元素的CSS樣式,注意是獲取不是設置
在開始之前先說下獲取最終應用在元素上的所有CSS屬性對象的意思是,如果沒有給元素設置任何樣式,也會把浏覽器默認的樣式返回來。
1、ele.style
在學習DOM的時候就看到通過ele.style來獲取元素樣式值,但是有時候獲取的並非是節點的樣式值,而是空值。這是因為ele.style只能獲取寫在元素標簽中的style屬性裡的樣式值,無法獲取到定義在<style></style>和通過<link href="css.css">加載進來的樣式屬性
例子:
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文件,頁面中嵌入的<style>屬性等)。
語法:
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) { var style = null; if(window.getComputedStyle) { style = window.getComputedStyle(ele, null); }else{ style = ele.currentStyle; } return style; }
以上這篇原生js獲取元素樣式的簡單方法就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持。