五月综合缴情婷婷六月,色94色欧美sute亚洲线路二,日韩制服国产精品一区,色噜噜一区二区三区,香港三级午夜理伦三级三

您現(xiàn)在的位置: 365建站網(wǎng) > 365文章 > 詳解js正確獲取元素樣式

詳解js正確獲取元素樣式

文章來(lái)源:365jz.com     點(diǎn)擊數(shù):685    更新時(shí)間:2009-09-20 08:49   參與評(píng)論
在說(shuō)js獲取元素樣式之前,簡(jiǎn)單地談一下樣式
---------------------------
樣式分三種
外部樣式 External  Style  Sheet
以CSS為擴(kuò)展名的文件(又稱(chēng)為"超文本樣式表"文件),它的作用范圍可以是多張網(wǎng)頁(yè),或整個(gè)網(wǎng)站,甚至不同的網(wǎng)站。與網(wǎng)頁(yè)鏈接后,才能應(yīng)用。
嵌入式樣式 internal Style Sheet
包含在網(wǎng)頁(yè)內(nèi)部的樣式設(shè)置,它的作用范圍僅限于嵌入的網(wǎng)頁(yè)。
內(nèi)聯(lián)式樣式 inline Style
在HTML文檔中,內(nèi)聯(lián)式樣式表的格式化信息直接插入所應(yīng)用的網(wǎng)頁(yè)元素的HTML標(biāo)簽中,作為其HTML標(biāo)簽的屬性參數(shù)。嚴(yán)格地說(shuō),內(nèi)聯(lián)樣式表稱(chēng)不上表,僅僅是一條HTML標(biāo)記。
當(dāng)出現(xiàn)相同的樣式時(shí),優(yōu)先級(jí)是內(nèi)聯(lián)大于嵌入式樣式,  嵌入式樣式大于外部樣式。
---------------------------------------------------------------
當(dāng)js獲取這三種樣式時(shí),style只能獲取內(nèi)聯(lián)樣式,獲取不到外部樣式和嵌入式樣式,因此要用currentStyle屬性,而currentStyle在FF下不支持
下面介紹二種  兼容FF和IE和正確獲取樣式的方法
-------------------------
var $=function(id){return document.getElementById(id) };
方法一
 /*
  * @string id
  * @string styleName 樣式名
  */
 function getEyeJsStyle(id,styleName){
    if($(id).currentStyle){//ie
       return $(id).currentStyle[styleName];
    }else{ //ff
       var $arr=$(id).ownerDocument.defaultView.getComputedStyle($(id), null);
       return $arr[styleName];
    }
 }

方法二:
  HTMLElement.prototype.__defineGetter__("currentStyle", function () {
        return this.ownerDocument.defaultView.getComputedStyle(this, null);
    });

講述一下getComputedStyle函數(shù)的用法
這個(gè)函數(shù)有兩個(gè)參數(shù):
第一個(gè)參數(shù)為需要獲取樣式的元素對(duì)象;
第二個(gè)參數(shù)為偽元素,如:hover, :first-letter, :before等等,
如果不需要偽元素則該參數(shù)為null。
getComputedStyle()函數(shù)可以從 document.defaultView 對(duì)象中訪問(wèn)到,即可以這樣調(diào)用該函數(shù)
--------------------------------------------------------------------------------------------

順便說(shuō)一下runtimeStyle屬性,首頁(yè)該屬性只在IE中支持,在FF不支持
runtimeStyle  運(yùn)行時(shí)的樣式!如果與style的屬性重疊,將覆蓋style的屬性!
意思就是當(dāng)指定了runtimeStyle,那么當(dāng)前顯示的樣式以runtimeStyle為準(zhǔn),如果取消了runtimeStyle,那么當(dāng)前顯示樣式就恢復(fù)到currentStyle的樣式。
例如設(shè)置document.getElementById("eyejs").runtimeStyle.width="400px"; 那該元素的寬度就是400px,,將覆蓋style的屬性
下載案例:http://www.eyejs.com/html/74/n-174.html

如對(duì)本文有疑問(wèn),請(qǐng)?zhí)峤坏浇涣髡搲?,廣大熱心網(wǎng)友會(huì)為你解答!! 點(diǎn)擊進(jìn)入論壇

發(fā)表評(píng)論 (685人查看,0條評(píng)論)
請(qǐng)自覺(jué)遵守互聯(lián)網(wǎng)相關(guān)的政策法規(guī),嚴(yán)禁發(fā)布色情、暴力、反動(dòng)的言論。
昵稱(chēng):
最新評(píng)論
------分隔線----------------------------

其它欄目

· 建站教程
· 365學(xué)習(xí)

業(yè)務(wù)咨詢(xún)

· 技術(shù)支持
· 服務(wù)時(shí)間:9:00-18:00
365建站網(wǎng)二維碼

Powered by 365建站網(wǎng) RSS地圖 HTML地圖

copyright © 2013-2024 版權(quán)所有 鄂ICP備17013400號(hào)