亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

JavaScript中獲取樣式的原生方法小結(jié)

 更新時(shí)間：2014年10月08日 09:43:33   投稿：junjie  
這篇文章主要介紹了JavaScript中獲取樣式的原生方法小結(jié),本文總結(jié)了5種JS獲取樣式的原生方法,并分別給出了實(shí)例,需要的朋友可以參考下

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

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

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

var ele = document.getElementById('ele');
ele.style.color;    //獲取顏色

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

復(fù)制代碼 代碼如下:
window.getComputedStyle("元素", "偽類(lèi)");

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

var ele = document.getElementById('ele');
var styles = window.getComputedStyle(ele,null);
styles.color;  //獲取顏色

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

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

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

var ele = document.getElementById('ele');
var styles = ele.currentStyle;
styles.color;

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

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

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

var ele = document.getElementById('ele');
window.getComputedStyle(ele,null).getPropertyValue('color');

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

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

復(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ùn)作就應(yīng)用了getComputedStyle以及getPropertyValue方法。

相關(guān)文章

最新評(píng)論