快捷導(dǎo)航

利用原生JavaScript獲取元素樣式只是獲取而已

更新時間：2014年10月08日 16:40:04 投稿：whsnow

原生JavaScript獲取樣式，是獲取樣式，不是設(shè)置樣式。若沒有給元素設(shè)置樣式值，則返回瀏覽器給予的默認值

ps：是獲取樣式，不是設(shè)置樣式。若沒有給元素設(shè)置樣式值，則返回瀏覽器給予的默認值。（論壇整理）

1、element.style:只能獲取寫在元素標(biāo)簽中的style屬性里的樣式值，無法獲取到定義在<style></style>和通過<link href=”css.css”>加載進來的樣式屬性

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

ele.style.color; //獲取顏色

2、window.getComputedStyle():可以獲取當(dāng)前元素所有最終使用的CSS屬性值。

復(fù)制代碼代碼如下:

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

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

復(fù)制代碼代碼如下:

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

var styles = window.getComputedStyle(ele,null);

styles.color; //獲取顏色

可以通過style.length來查看瀏覽器默認樣式的個數(shù)。IE6-8不支持該方法，需要使用后面的方法。對于Firefox和Safari，會把顏色轉(zhuǎn)換成rgb格式。

3、element.currentStyle:IE 專用，返回的是元素當(dāng)前應(yīng)用的最終CSS屬性值（包括外鏈CSS文件，頁面中嵌入的<style>屬性等）。

復(fù)制代碼代碼如下:

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

var styles = ele.currentStyle;

styles.color;

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

4、getPropertyValue()：獲取CSS樣式的直接屬性名稱

復(fù)制代碼代碼如下:

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

window.getComputedStyle(ele,null).getPropertyValue('color');

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

5、getAttribute()：與getPropertyValue類似，有一點的差異是屬性名駝峰格式

復(fù)制代碼代碼如下:

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

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

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

下面的獲取樣式方法兼容IE、chrome、FireFox等

復(fù)制代碼代碼如下:

function getStyle(ele) {

var style = null;

if(window.getComputedStyle) {

style = window.getComputedStyle(ele, null);

}else{

style = ele.currentStyle;

}

return style;

}

在JQuery中，常用css()獲取樣式屬性，其底層運作就應(yīng)用了getComputedStyle以及getPropertyValue方法。

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

利用原生JavaScript獲取元素樣式只是獲取而已

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具