JavaScript讀取元素的CSS信息

　　在前端開發的工作中，總是會涉及到一些JavaScript和CSS信息交互的內容。比如為某個HTML元素級聯了一組樣式信息，其中width屬性的值為80px。然后調用腳本讀取這個值，得到的結果總是一個空字符串，而事實上我想得到"80px"。針對這種情況，David Flanagan在《JavaScript 權威指南》(第五版)一書中給出了解決方案。

　　以下是針對JavaScript: The Definitive Guide, 5th Edition Chapter16 Section4的翻譯

　　腳本計算的樣式

　　HTML元素的style屬性相當于style HTML 特性， 而作為style屬性的值，CSS2屬性對象只為這樣的一個元素內聯樣式信息。這并不包括CSS級聯里面的任何其他樣式。有時你的確想知道確切的賦予某個元素的樣式設置，同時忽略掉在級聯里面的樣式。你想要做的就是為元素計算樣式。很不幸被計算的樣式的名字是含糊的;它與在瀏覽器顯示元素之前被執行的計算相關：所有的樣式均被嘗試能否適用于元素，并且所有適用的樣式被合并在元素的任何內嵌樣式中。這種聚集后的樣式信息能夠被用于正確的將元素表現在瀏覽器窗口中。在W3C標準中，用于決定元素被計算樣式的API是window對象的getComputedStyle()方法。這個方法的第一個參數是期望被計算樣式的元素。第二個參數是任何期望的CSS偽對象，比如":before"或者":after"。你很可能不會對偽對象感興趣，但是在Mozilla和Firefox對于該方法的實現中，第二個參數是不能被忽略的。

　　否則，由于它的第二個參數，你總是會發現getComputedStyle()引發null。getComputedStyle()的返回值是一個表現所有加載確定元素或者偽對象的樣式的CSS2屬性對象。與CSS2屬性對象能夠控制內嵌樣式信息不同，getComputedStyle()返回的對象是只讀的。IE不支持getComputedStyle()方法，但是提供了一個更簡單的替代方案。每個HTML元素有一個currentStyle屬性可以控制它被計算的樣式。IE的這個API唯一的缺點就是它不能提供一個查詢偽對象樣式的方式。作為被計算樣式的的一個例子，你可以使用如下的跨平臺的代碼來確認元素被表現的字型：

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

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈