JavaScript 讀取元素的CSS資訊的代碼_javascript技巧

比如為某個HTML元素級聯了一組樣式資訊，其中width屬性的值為80px。然後呼叫指令碼讀取這個值，得到的結果總是一個Null 字元串，而事實上我想得到"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唯一的缺點就是它不能提供一個查詢偽對象樣式的方式。作為被計算樣式的的一個例子，你可以使用如下的跨平台的代碼來確認元素被表現的字型：

複製代碼 代碼如下:

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屬性查詢它的位置和大小，結果總是返回"auto"。這是一個完全合法的CSS值，只是它並不是你想要的。