JS getStyle獲取最終樣式函數(shù)代碼

更新時間：2010年04月01日 18:02:12 作者：

定義一個id="flower"的div元素并設置如上樣式,我們的目標就是通過javascript來獲取樣式的最終屬性

 
#flower { 
width:100px; 
font-size:12px; 
float:left; 
opacity:0.5; 
filter:alpha(opacity=50); 
} 

定義一個id="flower"的div元素并設置如上樣式,我們的目標就是通過javascript來獲取樣式的最終屬性
<div id="flower" >...</div>
getStyle函數(shù):
這里用到了三個原型擴展
String.prototype.capitalize 這個方法是讓字符串首字母大寫
Array.prototype.contains 判斷數(shù)組中是否有指定成員
String.prototype.camelize 這個是讓"font-size" 字符串轉換成 "fontSize" 這樣的格式用來獲取樣式

復制代碼代碼如下:

 
String.prototype.capitalize=function(){ 
return this.charAt(0).toUpperCase() + this.substring(1).toLowerCase(); 
} 
Array.prototype.contains=function(A){ 
return (this.indexOf(A) >= 0); 
} 
String.prototype.camelize=function(){ 
return this.replace(/\-(\w)/ig, 
function(B, A) { 
return A.toUpperCase(); 
}); 
} 
var css={ 
getStyle:function(elem,styles){ 
var value, 
elem=document.getElementById(elem); 
if(styles == "float"){ 
document.defaultView ? styles = 'float' /*cssFloat*/ : styles='styleFloat'; 
} 
value=elem.style[styles] || elem.style[styles.camelize()]; 
if(!value){ 
if (document.defaultView && document.defaultView.getComputedStyle) { 
var _css=document.defaultView.getComputedStyle(elem, null); 
value= _css ? _css.getPropertyValue(styles) : null; 
}else{ 
if (elem.currentStyle){ 
value = elem.currentStyle[styles.camelize()]; 
} 
} 
} 
if(value=="auto" && ["width","height"].contains(styles) && elem.style.display!="none"){ 
value=elem["offset"+styles.capitalize()]+"px"; 
} 
if(styles == "opacity"){ 
try { 
value = elem.filters['DXImageTransform.Microsoft.Alpha'].opacity; 
value =value/100; 
}catch(e) { 
try { 
value = elem.filters('alpha').opacity; 
} catch(err){} 
} 
} 
return value=="auto" ? null :value; 
} 
} 
css.getStyle("flower","width"); //100px; 
css.getStyle("flower","font-size");//12px; 
css.getStyle("flower","float");//left 
css.getStyle("flower","opacity");//0.5 

先回顧下基礎
style 標準的樣式！可能是由style屬性指定的！
runtimeStyle 運行時的樣式！如果與style的屬性重疊，將覆蓋style的屬性！
currentStyle 指 style 和 runtimeStyle 的結合！
style 內(nèi)聯(lián)的樣式
currentStyle 代表了在全局樣式表、內(nèi)嵌樣式和 HTML 標簽屬性中指定的對象格式和樣式
runtimeStyle 代表了居于全局樣式表、內(nèi)嵌樣式和 HTML 標簽屬性指定的格式和樣式之上的對象的格式和樣式
(FF中沒有currentStyle 和runtimeStyle)
getStyle(元素id,獲取屬性);
獲取元素style標簽內(nèi)的樣式
elem.style[styles] || elem.style[styles.camelize()]
支持傳入"font-size"的寫法
但這并不是最終的樣式 .
獲取最終樣式有兩終辦法一個是
document.defaultView.getComputedStyle //w3c的方法
還有就是通過 elem.currentStyle["..."] //ie下的方法
currentStyle 方法需要將帶"-"字符的屬性需要通過String.prototype.camelize轉換成ie可識別的屬性

復制代碼代碼如下:

 
if(value=="auto" && ["width","height"].contains(styles) && elem.style.display!="none"){ 
value=elem["offset"+styles.capitalize()]+"px"; 
} 

當 css中定義元素的寬度為 auto時，并不能獲取元素的最終寬度是多少，我們可以用 offsetWidth 和 offsetHeight 獲取實際值
當然前提是要在元素為"可見"的狀態(tài)下!

復制代碼代碼如下:

 
try { 
value = elem.filters['DXImageTransform.Microsoft.Alpha'].opacity; 
value =value/100; 
}catch(e) { 
try { 
value = elem.filters('alpha').opacity; 
} catch(err){} 
} 

這是獲取透明度的方法,ie中定義透明度和其他瀏覽器不同.需把通過濾鏡得到的opacity值/100。返回標準的opacity值(范圍0-1);

您可能感興趣的文章: