getComputedStyle與currentStyle獲取樣式(style/class)
更新時(shí)間：2013年03月19日 16:21:14 作者：
通過document.getElementById(element).style.xxx可以獲取元素的樣式信息但是對(duì)于通過class屬性引用的外部樣式表就獲取不到了，感興趣的朋友可以了解下
大家都知道，用document.getElementById(‘element').style.xxx可以獲取元素的樣式信息，可是它獲取的只是DOM元素style屬性里的樣式規(guī)則，對(duì)于通過class屬性引用的外部樣式表，就拿不到我們要的信息了。
DOM標(biāo)準(zhǔn)里有個(gè)全局方法getComputedStyle，可以獲取到當(dāng)前對(duì)象樣式規(guī)則信息，如：getComputedStyle(obj,null).paddingLeft，就能獲取到對(duì)象的左內(nèi)邊距。但是事情還沒完，萬(wàn)惡的IE不支持此方法，它有自己的一個(gè)實(shí)現(xiàn)方式，那就是currentStyle，不同于全局方法getComputedStyle，它是作為DOM元素屬性存在的，如：obj.currentStyle.paddingLeft，在IE中就獲取到對(duì)象的左內(nèi)邊距了，兼容性的寫法如下：
復(fù)制代碼 代碼如下:
return window.getComputedStyle ? window.getComputedStyle(obj,null).paddingLeft : obj.currentStyle.paddingLeft;
這樣，就能在IE及FF中返回對(duì)象的當(dāng)前樣式信息了。
特別注意一點(diǎn)：如果要獲取當(dāng)前對(duì)象的顏色信息，IE返回的是16進(jìn)制的'#ffffff'，而FF返回的是rgb(255,255,255)
用js的style屬性可以獲得html標(biāo)簽的樣式，但是不能獲取非行間樣式。那么怎么用js獲取css的非行間樣式呢？在IE下可以用currentStyle，而在火狐下面我們需要用到getComputedStyle。下面是一個(gè)小示例：
復(fù)制代碼 代碼如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js用currentStyle和getComputedStyle獲取css樣式</title>
<style type="text/css">
#div1{width:100px; height:100px; background:red;}
</style>
<script type="text/javascript">
function getStyle(obj, attr)
{
if(obj.currentStyle)
{
return obj.currentStyle[attr];
}
else
{
return getComputedStyle(obj,false)[attr];
}
}
window.onload=function()
{
var oDiv=document.getElementById('div1');
alert(getStyle(oDiv,'width'))
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
相關(guān)文章
js購(gòu)物車實(shí)現(xiàn)思路及代碼(個(gè)人感覺不錯(cuò))
提起購(gòu)物車想必只有在一些購(gòu)物網(wǎng)站上才可以看得到，下面為大家介紹下使用js實(shí)現(xiàn)的購(gòu)物車，感興趣的朋友可以參考下2013-12-12
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)手寫板，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
如何通過JS實(shí)現(xiàn)日歷簡(jiǎn)單算法
這篇文章主要介紹了如何通過JS實(shí)現(xiàn)日歷簡(jiǎn)單算法,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-10-10
微信小程序?qū)崿F(xiàn)多行文字超出部分省略號(hào)顯示功能
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)多行文字 超出部分省略號(hào)顯示功能，比如設(shè)置只顯示2行，超出部分省略號(hào)顯示，本文通過實(shí)例代碼給大家介紹,需要的朋友可以參考下2019-10-10
JavaScript中的document.querySelector()方法使用詳解
HTML的DOM querySelector()方法可以不需要額外的jQuery等支持,也可以方便的獲取DOM元素,語(yǔ)法跟jQuery類似,這篇文章主要給大家介紹了關(guān)于JavaScript中document.querySelector()方法使用的相關(guān)資料,需要的朋友可以參考下2024-06-06
教你如何自定義百度分享插件以及bshare分享插件的分享按鈕
在項(xiàng)目中我們常用到百度分享插件或者bshare分享插件，雖然官方都有自定義按鈕的功能，但是畢竟還是只有少數(shù)幾種，我們?nèi)绾蝸碇谱饔凶约禾厣姆窒戆粹o呢？2014-06-06
這篇文章主要介紹了canvas軌跡回放功能實(shí)現(xiàn)過程以及相關(guān)的代碼整理，跟著小編一起學(xué)習(xí)下吧。2017-12-12
JS/jQuery實(shí)現(xiàn)獲取時(shí)間的方法及常用類完整示例
這篇文章主要介紹了JS/jQuery實(shí)現(xiàn)獲取時(shí)間的方法及常用類,結(jié)合完整實(shí)例形式分析了javascript針對(duì)日期時(shí)間的獲取、轉(zhuǎn)換、計(jì)算與檢測(cè)相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
本文主要介紹了javascript history對(duì)象的相關(guān)知識(shí)。具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
在 javascript 中如何快速獲取數(shù)組指定位置的元素
這篇文章主要介紹了在 javascript 中快速獲取數(shù)組指定位置的元素,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04