比如為某個HTML元素級聯(lián)了一組樣式信息,其中width屬性的值為80px。然后調(diào)用腳本讀取這個值,得到的結(jié)果總是一個空字符串,而事實上我想得到"80px"。針對這種情況,David Flanagan在《JavaScript 權(quán)威指南》(第五版)一書中給出了解決方案。
以下是針對JavaScript: The Definitive Guide, 5th Edition Chapter16 Section4的翻譯
腳本計算的樣式
HTML元素的style屬性相當(dāng)于style HTML 特性, 而作為style屬性的值,CSS2屬性對象只為這樣的一個元素內(nèi)聯(lián)樣式信息。這并不包括CSS級聯(lián)里面的任何其他樣式。有時你的確想知道確切的賦予某個元素的樣式設(shè)置,同時忽略掉在級聯(lián)里面的樣式。你想要做的就是為元素計算樣式。很不幸被計算的樣式的名字是含糊的;它與在瀏覽器顯示元素之前被執(zhí)行的計算相關(guān):所有的樣式均被嘗試能否適用于元素,并且所有適用的樣式被合并在元素的任何內(nèi)嵌樣式中。這種聚集后的樣式信息能夠被用于正確的將元素表現(xiàn)在瀏覽器窗口中。在W3C標(biāo)準(zhǔn)中,用于決定元素被計算樣式的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唯一的缺點就是它不能提供一個查詢偽對象樣式的方式。作為被計算樣式的的一個例子,你可以使用如下的跨平臺的代碼來確認(rèn)元素被表現(xiàn)的字型:
新聞熱點
疑難解答