【轉載】javascript getComputedStyle,getPropertyValue,CurrentStyle說明

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

http://hi.baidu.com/jiang_yy_jiang/item/95217544ea5a31e6bdf451ae

當你看到這篇文章的時候，我就納悶了，這個屬性你為啥用得上？估計是高手來著？哈哈！或者說瞥見了某個大型網站或者某個文章電子書裡關於這幾個屬性的介紹，來百度沒事查查？哎說這麼多，其實也沒啥的，還是分享一下下面這個例子：

杯具般的程式員，先看看getPropertyValue吧，其實做程式員很苦的，換行吧！

Dom 中的getPropertyValue方法可以用來擷取元素中指定的css屬性值．該方法支援W3C標準．與IE中的currentStyle方法作用相同．都是根據指定的css屬性名稱來擷取屬性值．比如要擷取某div的寬度是多少，文字排放text-align是怎麼對齊的，以及position如何定位的．
他們的區別是：
1：getPropertyValue必須配合getComputedStyle方法一起使用．
2：getPropertyValue支援W3C標準．但不支援IE瀏覽器，
3：currentStyle非W3C標準．只支援IE.不能在FF等瀏覽器下使用．
如果想在多瀏覽器裡實現這種效果，必鬚根據判斷瀏覽器來配合使用．我在下面會給出一個相容IE和FF等瀏覽器擷取元素css屬性值的例子．

文法：css_value=window.getComputedStyle.getPropertyValue(css_name) 傳回值：

css_value:返回對某個css屬性值的引用．如:text-align值，position值等．

參數

window.getComputedStyle:直接使用window對象調用getComputedStyle方法來擷取所有可用的css屬性．
css_name:要擷取的css屬性值的名稱．比如:text-align,position,background等等．

getPropertyValue執行個體

<html>
<head>
<title>Dom:currentStyle使用執行個體</title>
<style>
#a{
border:1px solid;
width:200px;
height:100px;
text-align:center;
position:absolute;
}
</style>
</head>
<body>
<div id="a"></div>
<script language="javascript">
var a = document.getElementById("a")//擷取元素
if(document.all){//IE瀏覽器
var wh = a.currentStyle["width"];
var text_align = a.currentStyle["textAlign"];
var posi = a.currentStyle["position"];
}
else{//FF或其他瀏覽器
var wh = window.getComputedStyle(a,null).width;
var text_align = "textAlign"; //凡是帶橫杠(-)的屬性，在FF瀏覽器裡必須轉換一下屬性名稱
text_align = text_align.replace(/([A-Z])/g,"-$1");//使用正則轉換
text_align.toLowerCase();
text_align = window.getComputedStyle(a,null).getPropertyValue(text_align);
var posi = window.getComputedStyle(a,null).getPropertyValue("position");
}
alert("寬度值是：" + wh);
alert("文本排放是：" + text_align);
alert("position值是：" + posi);
</script>
</body>
</html>

經測試getPropertyValue至少相容以下瀏覽器:Firefox
W3C標準：是

接下來這個就是getComputedStyle咯，這個哥們你就要注意了，只針對Firefox哈！都說要你別搞什麼BS了，還要考慮這些頭痛問題！

getComputedStyle說明:

Dom 中getComputedStyle方法可用來擷取元素中所有可用的css屬性列表．以數組形式返回．注意啊getComputedStyle不會直接返回元素中某個css樣式的屬性值．他返回的是一個數組．這個數組中包括所有可用的css屬性．例如:float,positin,border,background等等．
通常這個方法必須配合getPropertyValue屬性使用，才可以擷取指定的css屬性值，如只想擷取width的值或text-align以及left的值.就必須使用getPropertyValue屬性．為了方便理解．我在下面例子中只示範getComputedStyle方法的作用．
該方法不支援IE瀏覽器，請使用FF和其他支援Dom標準的瀏覽器查看．
如果想瞭解擷取某個屬性的值，請點擊:currentStyle或getPropertyValue

文法：arr_style=window.getComputedStyle(elem_id,ov); 傳回值：

arr_style:以數組的形式．返回所有的css可用屬性．

參數

window:直接調用window對象訪問getComputedStyle方法．
elem_id:元素的id,要擷取該元素的css樣式
ov:虛擬元素，是否要擷取虛擬元素屬性值．如hover,active,link等屬性．如果不想擷取這些虛擬元素的屬性值請填寫為null.

getComputedStyle執行個體

<html>
<head>
<title>Dom:getComputedStyle使用執行個體</title>
</head>
<body>
<h2>第一次會彈出擷取的css屬性數組的長度，然後依次彈出可用屬性,大家會發現background-attachment,background-color,background-image
看完例子你應該會明白getComputedStyle具體作用了，如果想擷取某個屬性的值．請配合使用getPropertyValue
<div id="a"></div>
<script language="javascript">
var a = document.getElementById("a")//擷取元素
var arr_style = window.getComputedStyle(a,null);
alert(arr_style.length);//數組的長度．包含所有css可用屬性
alert(arr_style[0]);//我們來看看數組第一個css屬性是什麼
alert(arr_style[1]);//再來看第二個
alert(arr_style[2]);//再來第三個
</script>
</body>
</html>

下面一個CurrentStyle就只針對IE了，哥們我跟你說進程式員這個行業，沒有十足愛好那麼你還是收手吧！也許還來得及的！

Dom 中的currentStyle屬性．從字面上理解這是當前樣式風格．沒錯currentStyle就是用來擷取元素內Css的style樣式屬性值．比如說元素的width值height值．甚至元素的文本排放方式text-align,包括position等等．所有的css屬性值都可以被擷取．但是 currentStyle僅支援IE瀏覽器，如若想在FF或基於Dom標準的其他瀏覽器內實現相同效果．請使用getComputedStyle屬性．我在下面給出一個例子，來擷取div的寬度值，文本如何排放．和絕對位置的值．已支援IE和FF其他瀏覽器．放心瀏覽！

文法：o=elem.currentStyle[style_name]; 傳回值：

o:返回元素某個樣式屬性值的引用．

參數

elem:要在該元素內擷取樣式屬性．
style_name:樣式屬性名稱．如：width,height,text-align

currentStyle執行個體 <html>
<head>
<title>Dom:currentStyle使用執行個體</title>
<style>
#a{
border:1px solid;
width:200px;
height:100px;
text-align:center;
position:absolute;
}
</style>
</head>
<body>
<div id="a"></div>
<script language="javascript">
var a = document.getElementById("a")//擷取元素
if(document.all){//IE瀏覽器
var wh = a.currentStyle["width"];
var text_align = a.currentStyle["textAlign"];
var posi = a.currentStyle["position"];
}
else{//FF或其他瀏覽器
var wh = window.getComputedStyle(a,null).width;
var text_align = "textAlign"; //凡是帶橫杠(-)的屬性，在FF瀏覽器裡必須轉換一下屬性名稱
text_align = text_align.replace(/([A-Z])/g,"-$1");//
text_align.toLowerCase();
text_align = window.getComputedStyle(a,null).getPropertyValue(text_align);
var posi = window.getComputedStyle(a,null).getPropertyValue("position");
}
alert("寬度值是：" + wh);
alert("文本排放是：" + text_align);
alert("position值是：" + posi);
</script>
</body>

----------------------------------------------------------以上為原文--------------------------------------------------------------------------

今天也是頭一次接觸這個方法，原因是在搞一個Splitter bar控制項時，它的Splitter的absolute定位有問題，通過查文檔知道absolute定位在遇到父級結點且Position是Relative時，就以該父結點進行定位。那在通過結點擷取Offsetleft和Offsettop時就需要判斷當前的OffsetParent的Position是什麼，而直接從el.style.position是擷取不到的，因為不是inline的style，直接取就取不到，就需要使用上文中介紹的方法，當然，更為通用的方法是：

function getStyle(el,styleProp){    var x;    if (typeof(el) == "string")    {        x = document.getElementById(el);    }    else{        x=el;    }        if (x.currentStyle)        var y = x.currentStyle[styleProp];    else if (window.getComputedStyle)        var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);    return y;}

參考文章：

http://www.quirksmode.org/dom/getstyles.html

http://www.quirksmode.org/js/findpos.html

http://www.quirksmode.org/dom/w3c_cssom.html#offsetParent

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More