JavaScript讀取元素的CSS信息

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

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

　　腳本計(jì)算的樣式

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

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

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

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)