手寫的一個兼容各種瀏覽器的javascript getStyle函數(shù)(獲取元素的樣式)
要想獲取HTML元素的計算樣式一直都存在很多的兼容問題，各瀏覽器都會存在一些差異，F(xiàn)irefox、webkit(Chrome,Safari)支持W3C標(biāo)準(zhǔn)的方法：getComputedStyle()，而IE6/7/8不支持標(biāo)準(zhǔn)的方法但是有私有的屬性來實(shí)現(xiàn)：currentStyle，IE9和Opera兩個都支持。有了這2個方法和屬性基本上可以滿足大多數(shù)要求了。
var getStyle = function( elem, type ){
return 'getComputedStyle' in window ? getComputedStyle(elem, null)[type] : elem.currentStyle[type];
};
但是對于自適應(yīng)的寬度和高度使用currentStyle就沒法獲取到計算的值，只能返回auto，而getComputedStyle()就可以返回計算的值，解決這個問題有好幾種辦法。我之前想到的是用clientWidth/clientHeight減去padding的值，這樣就可以在不支持標(biāo)準(zhǔn)方法的瀏覽器中獲取到計算的寬度和高度。前幾天看到司徒正美采用了另一種辦法，使用getBoundingClientRect()方法獲取到元素在頁面中的位置，然后right減去left就是寬度，bottom減去top就是高度。我對他的代碼做了一些小小的修改，最終代碼如下：
var getStyle = function( elem, style ){
return 'getComputedStyle' in window ?
getComputedStyle( elem, null )[style] :
function(){
style = style.replace( /\-(\w)/g, function( $, $1 ){
return $1.toUpperCase();
});
var val = elem.currentStyle[style];
if( val === 'auto' && (style === "width" || style === "height") ){
var rect = elem.getBoundingClientRect();
if( style === "width" ){
return rect.right - rect.left + 'px';
}else{
return rect.bottom - rect.top + 'px';
}
}
return val;
}();
};
// 調(diào)用該方法
var test = document.getElementById( 'test' ),
// 獲取計算的寬度
tWidth = getStyle( test, 'width' );
新的問題，如果元素的寬度或高度使用了em或%的單位，getComputedStyle()返回的值就會自動將em或%換成px的單位，currentStyle就不會，而如果是font-size使用em為單位，在Opera下返回的是0em，Opera真的很恐怖！
后來在使用發(fā)現(xiàn)中還有一些沒想到的兼容問題，今天我對原來的代碼進(jìn)行了優(yōu)化，并對一些常見的兼容問題進(jìn)行了處理。
在javascript中“-”(中劃線或連字符)代表的是減號，而在CSS中，許多樣式屬性都有這個符號，如padding-left、font-size等，所以在javascript中如果出現(xiàn)如下的代碼就一個錯誤：
正確的寫法應(yīng)該是：
這里需要把CSS的中劃線去掉并把原來緊跟在中劃線后的字母大寫，俗稱“駝峰式”寫法，不管是使用javascript設(shè)置或是獲取元素的CSS樣式都應(yīng)該是駝峰式的寫法。但是不少對CSS熟悉而又對javascript不太熟悉的新手朋友總是會犯這種低級錯誤，使用replace的高級用法可以很簡單的將CSS屬性中的中劃線替換成駝峰式的寫法。
return $1.toUpperCase();
});
對于float，在javascript中屬于保留字，在javascript中設(shè)置或獲取元素的float的值，都有其他的代替寫法，在標(biāo)準(zhǔn)瀏覽器中為cssFloat，而在IE6/7/8中為styleFloat。
如果top、right、bottom、left沒有一個顯式的值，在獲取這些值的時候部分瀏覽器會返回一個auto，雖然auto這個值是一個合法的CSS屬性值，但絕不是我們想要的結(jié)果，而應(yīng)該是0px。
在IE6/7/8中要設(shè)置元素的透明度需要用到濾鏡、如：filter:alpha(opacity=60)，對于標(biāo)準(zhǔn)瀏覽器直接設(shè)置opacity即可，IE9兩種寫法都支持，我對獲取元素的透明度也做了兼容處理，只要使用opacity就可以獲取到所有瀏覽器元素的透明度的值。
在IE6/7/8中獲取元素的寬度和高度已經(jīng)在上篇文中介紹過了，這里就不再復(fù)述了。還有一個需要注意的地方就是，如果元素的樣式是使用style內(nèi)聯(lián)的寫法，或者是已經(jīng)使用javascript設(shè)置過樣式的屬性，可以使用下面的方法獲取到元素的計算樣式：
var height = elem.style.height;
這個方法比讀取getComputedStyle或currentStyle中的屬性值都要快，應(yīng)該優(yōu)先使用，當(dāng)然前提條件就是樣式是通過內(nèi)聯(lián)的寫法設(shè)置的(使用javascript設(shè)置也是設(shè)置內(nèi)聯(lián)樣式)。優(yōu)化過的最終代碼如下：
var getStyle = function( elem, p ){
var rPos = /^(left|right|top|bottom)$/,
ecma = "getComputedStyle" in window,
// 將中劃線轉(zhuǎn)換成駝峰式 如：padding-left => paddingLeft
p = p.replace( /\-(\w)/g, function( $, $1 ){
return $1.toUpperCase();
});
// 對float進(jìn)行處理
p = p === "float" ? ( ecma ? "cssFloat" : "styleFloat" ) : p;
return !!elem.style[p] ?
elem.style[p] :
ecma ?
function(){
var val = getComputedStyle( elem, null )[p];
// 處理top、right、bottom、left為auto的情況
if( rPos.test(p) && val === "auto" ){
return "0px";
}
return val;
}() :
function(){
var <a >wirelesscasinogames.com</a> val = elem.currentStyle[p];
// 獲取元素在IE6/7/8中的寬度和高度
if( (p === "width" || p === "height") && val === "auto" ){
var rect = elem.getBoundingClientRect();
return ( p === "width" ? rect.right - rect.left : rect.bottom - rect.top ) "px";
}
// 獲取元素在IE6/7/8中的透明度
if( p === "opacity" ){
var filter = elem.currentStyle.filter;
if( /opacity/.test(filter) ){
val = filter.match( /\d / )[0] / 100;
return (val === 1 || val === 0) ? val.toFixed(0) : val.toFixed(1);
}
else if( val === undefined ){
return "1";
}
}
// 處理top、right、bottom、left為auto的情況
if( rPos.test(p) && val === "auto" ){
return "0px";
}
return val;
}();
};
下面是調(diào)用示例：
<style>
.box{
width:500px;
height:200px;
background:#000;
filter:alpha(opacity=60);
opacity:0.6;
}
</style>
<div id="box"></div>
<script>
var box = document.getElementById( "box" );
alert( getStyle(box, "width") ); // "500px"
alert( getStyle(box, "background-color") ); // "rgb(0, 0, 0)" / "#000"
alert( getStyle(box, "opacity") ); // "0.6"
alert( getStyle(box, "float") ); // "none"
</script>
- javascript獲取設(shè)置div的高度和寬度兼容任何瀏覽器
- javascript使用百度地圖api和html5特性獲取瀏覽器位置
- javascript獲取瀏覽器類型和版本的方法(js獲取瀏覽器版本)
- javascript獲取和判斷瀏覽器窗口、屏幕、網(wǎng)頁的高度、寬度等
- JavaScript獲取網(wǎng)頁、瀏覽器、屏幕高度和寬度匯總
- javascript 獲取瀏覽器版本
- javascript實(shí)現(xiàn)獲取瀏覽器版本、操作系統(tǒng)類型
- JavaScript跨瀏覽器獲取頁面中相同class節(jié)點(diǎn)的方法
- JavaScript獲取各大瀏覽器信息圖示
相關(guān)文章
JS定時關(guān)閉窗口的實(shí)例，需要的朋友可以參考一下2013-05-05
JavaScript基本數(shù)據(jù)類型及值類型和引用類型
大家經(jīng)?？梢砸姷絡(luò)avascript中的一些數(shù)據(jù)類型，比如“undefined”、“boolean”、“string”等等，這篇文章就和大家一起來學(xué)習(xí)JavaScript基本數(shù)據(jù)類型及值類型和引用類型，有需要的童鞋參考下，本文寫的不好地方，還望大家提出，共同學(xué)習(xí)進(jìn)步2015-08-08
本文通過2個示例來給大家分享了下原生javascript結(jié)合ajax實(shí)現(xiàn)數(shù)據(jù)請求的方法以及原理，非常的簡單實(shí)用，有需要的小伙伴可以參考下2016-04-04
淺談js構(gòu)造函數(shù)的方法與原型prototype
下面小編就為大家?guī)硪黄獪\談js構(gòu)造函數(shù)的方法與原型prototype。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
xmlhttp是一種瀏覽器對象,?可用于模擬http的GET和POST請求,xmlhttp配合JavaScript可以實(shí)現(xiàn)頁面數(shù)據(jù)在無刷新下的定時數(shù)據(jù)更新,如果應(yīng)用在聊天室、文字直播上,可以取得較好的視覺效果,這篇文章主要介紹了JS——XMLHttpRequest?對象,需要的朋友可以參考下2024-01-01
細(xì)說JS數(shù)組遍歷的一些細(xì)節(jié)及實(shí)現(xiàn)
本文主要介紹了細(xì)說JS數(shù)組遍歷的一些細(xì)節(jié)及實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
微信小程序如何實(shí)現(xiàn)商品列表跳轉(zhuǎn)商品詳情頁功能
最近在學(xué)微信小程序開發(fā)的時候,碰上了一個問題,所以想著總結(jié)下,這篇文章主要給大家介紹了關(guān)于微信小程序如何實(shí)現(xiàn)商品列表跳轉(zhuǎn)商品詳情頁功能的相關(guān)資料,需要的朋友可以參考下2022-04-04
本文將用html，css和JavaScript實(shí)現(xiàn)一個簡單的便簽系統(tǒng)。除非手動清空便簽，否則便簽會一直保留，非常方便。感興趣的小伙伴可以跟隨小編一起動手試一試2022-02-02
這篇文章主要介紹了谷歌瀏覽器調(diào)試JavaScript小技巧,需要的朋友可以參考下2014-12-12
使用JS的input框?qū)崿F(xiàn)音頻文件的上傳與播放功能
最近的系統(tǒng)加的功能是越來越多了,前兩天老板又讓實(shí)現(xiàn)一個錄音上傳的功能,可以點(diǎn)擊播放按鈕打開音頻播放器,點(diǎn)擊暫停按鈕暫定播放,想了想決定使用input框的file類型加上接收的參數(shù)為audio來實(shí)現(xiàn)此功能,感興趣的朋友可以參考下2024-06-06