復制代碼 代碼如下:
#flower {
width:100px;
font-size:12px;
float:left;
opacity:0.5;
filter:alpha(opacity=50);
}
定義一個id="flower"的div元素 並設置如上樣式,我們的目標就是通過javascript來獲取樣式的最終屬性
<div id="flower" >...</div>
getStyle函數:
這裡用到了三個原型擴展
String.prototype.capitalize 這個方法是讓字符串首字母大寫
Array.prototype.contains 判斷數組中是否有指定成員
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 內聯的樣式
currentStyle 代表了在全局樣式表、內嵌樣式和 HTML 標簽屬性中指定的對象格式和樣式
runtimeStyle 代表了居於全局樣式表、內嵌樣式和 HTML 標簽屬性指定的格式和樣式之上的對象的格式和樣式
(FF中沒有currentStyle 和runtimeStyle)
getStyle(元素id,獲取屬性);
獲取元素style標簽內的樣式
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 獲取實際值
當然前提是要在元素為"可見"的狀態下!
復制代碼 代碼如下:
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);