比如為某個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唯一的缺點就是它不能提供一個查詢偽對象樣式的方式。作為被計算樣式的的一個例子，你可以使用如下的跨平臺的代碼來確認元素被表現(xiàn)的字型：

計算樣式很快，而且它并不總是提供你想要的信息?？紤]剛才字型的例子。font-family屬性接受了一個逗號分隔的列表，輕松的為跨平臺提供了被期望的字體類型。當(dāng)你查詢被計算的fontFamily屬性時，你很容易得到確定的加在元素上的font-family樣式的值。這或許返回一個值類似于"arial,helvetica,sans-serif",卻并不告訴你究竟哪個字型才是真正正在使用的。類似的，如果一個元素沒有被絕對定位，而企圖通過被計算樣式的top和left屬性查詢它的位置和大小，結(jié)果總是返回"auto"。這是一個完全合法的CSS值，只是它并不是你想要的。

最新評論