JavaScript 讀取元素的CSS信息的代碼
比如為某個HTML元素級聯(lián)了一組樣式信息,其中width屬性的值為80px。然后調(diào)用腳本讀取這個值,得到的結(jié)果總是一個空字符串,而事實上我想得到"80px"。針對這種情況,David Flanagan在《JavaScript 權(quán)威指南》(第五版)一書中給出了解決方案。
以下是針對JavaScript: The Definitive Guide, 5th Edition Chapter16 Section4的翻譯
腳本計算的樣式
HTML元素的style屬性相當于style HTML 特性, 而作為style屬性的值,CSS2屬性對象只為這樣的一個元素內(nèi)聯(lián)樣式信息。這并不包括CSS級聯(lián)里面的任何其他樣式。有時你的確想知道確切的賦予某個元素的樣式設置,同時忽略掉在級聯(lián)里面的樣式。你想要做的就是為元素計算樣式。很不幸被計算的樣式的名字是含糊的;它與在瀏覽器顯示元素之前被執(zhí)行的計算相關(guān):所有的樣式均被嘗試能否適用于元素,并且所有適用的樣式被合并在元素的任何內(nèi)嵌樣式中。這種聚集后的樣式信息能夠被用于正確的將元素表現(xiàn)在瀏覽器窗口中。在W3C標準中,用于決定元素被計算樣式的API是window對象的getComputedStyle()方法。這個方法的第一個參數(shù)是期望被計算樣式的元素。第二個參數(shù)是任何期望的CSS偽對象,比如":before"或者":after"。你很可能不會對偽對象感興趣,但是在Mozilla和Firefox對于該方法的實現(xiàn)中,第二個參數(shù)是不能被忽略的。否則,由于它的第二個參數(shù),你總是會發(fā)現(xiàn)getComputedStyle()引發(fā)null。getComputedStyle()的返回值是一個表現(xiàn)所有加載確定元素或者偽對象的樣式的CSS2屬性對象。與CSS2屬性對象能夠控制內(nèi)嵌樣式信息不同,getComputedStyle()返回的對象是只讀的。IE不支持getComputedStyle()方法,但是提供了一個更簡單的替代方案。每個HTML元素有一個currentStyle屬性可以控制它被計算的樣式。IE的這個API唯一的缺點就是它不能提供一個查詢偽對象樣式的方式。作為被計算樣式的的一個例子,你可以使用如下的跨平臺的代碼來確認元素被表現(xiàn)的字型:
var p = document.getElementsByTagName("p")[0]; // Get first paragraph of doc
var typeface = ""; // We want its typeface
if (p.currentStyle) // Try simple IE API first
typeface = p.currentStyle.fontFamily;
else if (window.getComputedStyle) // Otherwise use W3C API
typeface = window.getComputedStyle(p, null).fontFamily;
計算樣式很快,而且它并不總是提供你想要的信息??紤]剛才字型的例子。font-family屬性接受了一個逗號分隔的列表,輕松的為跨平臺提供了被期望的字體類型。當你查詢被計算的fontFamily屬性時,你很容易得到確定的加在元素上的font-family樣式的值。這或許返回一個值類似于"arial,helvetica,sans-serif",卻并不告訴你究竟哪個字型才是真正正在使用的。類似的,如果一個元素沒有被絕對定位,而企圖通過被計算樣式的top和left屬性查詢它的位置和大小,結(jié)果總是返回"auto"。這是一個完全合法的CSS值,只是它并不是你想要的。
相關(guān)文章
js實現(xiàn)簡易的單數(shù)字隨機抽獎(0-9)
這篇文章主要介紹了js實現(xiàn)簡易的單數(shù)字0-9隨機抽獎,可以控制抽取隨機數(shù)開始與停止,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2015-08-08
純JavaScript實現(xiàn)實時反饋系統(tǒng)時間
這篇文章主要介紹了純JavaScript實現(xiàn)實時反饋系統(tǒng)時間的相關(guān)資料,需要的朋友可以參考下2017-10-10
js中int和string數(shù)據(jù)類型互相轉(zhuǎn)化實例
在本篇文章里小編給大家分享了關(guān)于js中int和string數(shù)據(jù)類型互相轉(zhuǎn)化實例和代碼,需要的朋友們學習下。2019-01-01
通過復制Table生成word和excel的javascript代碼
通過復制Table生成word和excel,個人感覺這個功能還是比較實用的,下面有個不錯的示例,希望對大家有所幫助2014-01-01
JavaScript實現(xiàn)有限狀態(tài)機的示例代碼
有限狀態(tài)機(Finite?State?Machine,?FSM)是一種數(shù)學模型,用于描述系統(tǒng)在不同狀態(tài)下的行為,本文給大家介紹JavaScript實現(xiàn)有限狀態(tài)機的示例代碼,感興趣的朋友一起看看吧2024-12-12
動態(tài)創(chuàng)建按鈕的JavaScript代碼
本文給大家分享一段JS實例代碼介紹動態(tài)創(chuàng)建按鈕的方法,需要的朋友參考下本文2016-01-01

