我們?cè)陂_(kāi)發(fā)過(guò)程中經(jīng)常會(huì)遇到通過(guò)js獲取或者改變DOM元素的樣式，方法有很多，比如：通過(guò)更改DOM元素的class?，F(xiàn)在我們討論原生js來(lái)獲取DOM元素的CSS樣式，注意是獲取不是設(shè)置

在開(kāi)始之前先說(shuō)下獲取最終應(yīng)用在元素上的所有CSS屬性對(duì)象的意思是，如果沒(méi)有給元素設(shè)置任何樣式，也會(huì)把瀏覽器默認(rèn)的樣式返回來(lái)。

1、ele.style

在學(xué)習(xí)DOM的時(shí)候就看到通過(guò)ele.style來(lái)獲取元素樣式值，但是有時(shí)候獲取的并非是節(jié)點(diǎn)的樣式值，而是空值。這是因?yàn)閑le.style只能獲取寫(xiě)在元素標(biāo)簽中的style屬性里的樣式值，無(wú)法獲取到定義在<style></style>和通過(guò)<link href="css.css">加載進(jìn)來(lái)的樣式屬性

例子：

var test = document.getElementById("test");
    //獲取節(jié)點(diǎn)的color

    test.style.color;

2、getComputedStyle()

getComputedStyle是一個(gè)可以獲取當(dāng)前元素所有最終使用的CSS屬性值。

語(yǔ)法如下：

window.getComputedStyle("元素", "偽類(lèi)");

這個(gè)方法接受兩個(gè)參數(shù)：要取得計(jì)算樣式的元素和一個(gè)偽元素字符串（例如“:before”） 。如果不需要偽元素信息，第二個(gè)參數(shù)可以是null。也可以通過(guò)document.defaultView.getComputedStyle("元素", "偽類(lèi)");來(lái)使用

例子：

var test = document.getElementById("test"),
    demo = window.getComputedStyle(test, null); 

    //獲取節(jié)點(diǎn)的color

     demo.color 

注意：Firefox和Safari會(huì)將顏色轉(zhuǎn)換成rgb格式，如果test節(jié)點(diǎn)上沒(méi)有任何樣式，通過(guò)style.length來(lái)查看瀏覽器默認(rèn)樣式的個(gè)數(shù)。IE6-8不支持該方法，需要使用下面的方法

3、ele.currentStyle

currentStyle是IE瀏覽器自己的一個(gè)屬性，其語(yǔ)法與ele.style類(lèi)似，差別在于element.currentStyle返回的是元素當(dāng)前應(yīng)用的最終CSS屬性值（包括外鏈CSS文件，頁(yè)面中嵌入的<style>屬性等）。

語(yǔ)法：

var style = dom.currentStyle;

 例子：

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

    demo = test.currentStyle; 

    //獲取節(jié)點(diǎn)的color

    demo.color; 

注意：對(duì)于綜合屬性border等，ie返回undefined，其他瀏覽器有的返回值，有的不返回，但是borderLeftWidth這樣的屬性是返回值的

4、getPropertyValue()

getPropertyValue獲取CSS樣式的直接屬性名稱(chēng)

語(yǔ)法如下：

window.getComputedStyle(element, null).getPropertyValue(屬性)

例子：

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

   window.getComputedStyle(test, null).getPropertyValue("background-color");

注意：屬性名不支持駝峰格式，IE6-8不支持該方法，需要使用下面的方法

5、getAttribute

getAttribute與getPropertyValue類(lèi)似，有一點(diǎn)的差異是屬性名駝峰格式

例子：

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

    window.getComputedStyle(test, null).getPropertyValue("backgroundColor");

 注意：該方法只支持IE6-8

小結(jié)：

jQuery的CSS()方法，其底層運(yùn)作就應(yīng)用了getComputedStyle以及getPropertyValue方法，當(dāng)我們使用原生的js開(kāi)發(fā)時(shí)就可以通過(guò)以上方法獲取元素的值。

下面是一個(gè)兼容ie,firefox,chrome等瀏覽器的獲取元素樣式的方法，可以應(yīng)用到項(xiàng)目中

function getStyle(ele) {
  var style = null;
  
  if(window.getComputedStyle) {
    style = window.getComputedStyle(ele, null);
  }else{
    style = ele.currentStyle;
  }
  
  return style;
}

以上這篇原生js獲取元素樣式的簡(jiǎn)單方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論