擷取元素的最終樣式

    看到這樣一道微信面試題：用JS代碼求出頁面上一個元素的最終的background-color，不考慮IE浏覽器，不考慮元素float情況。（2017.3.1補充：賽賽同學提醒了我，還要考慮background這個複合屬性，情況變得異常複雜了，以下代碼是之前的，沒有考慮。)

    由于element.style.cssText隻能通路到元素内聯樣式即标簽style屬性，隻能用document.defaultView.getComputedStyle，考慮IE的話可用element.currentStyle，不過element.currentStyle無法用于僞元素而document.defaultView.getComputedStyle可以。如果要考慮元素不可見或者沒有設定值的時候，backgroundColor的表現可以認為是其父元素的表現（題目的“不考慮元素float情況”）也是這個意思吧。讓我來寫寫代碼：

<code>/**</code>

<code> </code><code>* 擷取元素自身css屬性</code>

<code> </code><code>* @param elem 元素</code>

<code> </code><code>* @param property 屬性名（這裡不考慮float）</code>

<code> </code><code>* @returns {string} css屬性值</code>

<code> </code><code>*/</code>

<code>function</code> <code>computedStyle(elem, property) {</code>

<code>    </code><code>if</code> <code>(!elem || !property) {</code>

<code>        </code><code>return</code> <code>''</code><code>;</code>

<code>    </code><code>}</code>

<code>    </code><code>var</code> <code>style = </code><code>''</code><code>;</code>

<code>    </code><code>if</code> <code>(elem.currentStyle) {</code>

<code>        </code><code>style = elem.currentStyle[camelize(property)];</code>

<code>    </code><code>} </code><code>else</code> <code>if</code> <code>(document.defaultView.getComputedStyle) {</code>

<code>        </code><code>style = document.defaultView.getComputedStyle(elem, </code><code>null</code><code>).getPropertyValue(property);</code>

<code>    </code><code>return</code> <code>style;</code>

<code>}</code>

<code> </code><code>* 将-連接配接屬性名轉換為駝峰命名形式</code>

<code> </code><code>* @param {string} str -連接配接字元串</code>

<code> </code><code>* @returns {string} 駝峰命名字元串</code>

<code>function</code> <code>camelize(str) {</code>

<code>    </code><code>return</code> <code>str.replace(/-(\w)/g, </code><code>function</code> <code>(s, p1) {</code>

<code>        </code><code>return</code> <code>p1.toUpperCase();</code>

<code>    </code><code>});</code>

<code> </code><code>* 在elem擷取的背景色是否為最終的背景色</code>

<code> </code><code>* @param elem</code>

<code> </code><code>* @returns {boolean}</code>

<code>function</code> <code>isFinalBGColor(elem) {</code>

<code>    </code><code>var</code> <code>bgc = computedStyle(elem, </code><code>'background-color'</code><code>);</code>

<code>    </code><code>return</code> <code>(!!bgc) &amp;&amp; (bgc !== </code><code>'transparent'</code><code>) &amp;&amp; (bgc !== </code><code>'rgba(0, 0, 0, 0)'</code><code>) &amp;&amp; (computedStyle(elem, </code><code>'opacity'</code><code>) !== </code><code>'0'</code><code>) &amp;&amp; (computedStyle(elem, </code><code>'visibility'</code><code>) !== </code><code>'hidden'</code><code>) &amp;&amp; (computedStyle(elem, </code><code>'display'</code><code>) !== </code><code>'none'</code><code>);</code>

<code> </code><code>* 獲得元素最終的背景色（不考慮半透明疊加顔色的情況）</code>

<code> </code><code>* @returns {string}</code>

<code>function</code> <code>getFinalBGColor(elem) {</code>

<code>    </code><code>if</code> <code>(isFinalBGColor(elem)){</code>

<code>        </code><code>return</code> <code>computedStyle(elem, </code><code>'background-color'</code><code>);</code>

<code>    </code><code>}</code><code>else</code> <code>if</code> <code>(elem!==document.documentElement) {</code>

<code>        </code><code>return</code> <code>getFinalBGColor(elem.parentNode);</code>

<code>    </code><code>return</code> <code>''</code><code>;</code>

    經過測試，在通常情況下，以上代碼可用。

本文轉自 iampomelo 51CTO部落格，原文連結：http://blog.51cto.com/iampomelo/1901241，如需轉載請自行聯系原作者