如何透過 ID 檢索 HTML 元素的所有內聯和外部樣式？

透過元素ID 擷取HTML 元素的樣式屬性

您想要建立一個函數，在給定元素的ID 時，擷取套用於該元素的所有樣式，內聯和外部定義。

這是一個全面的解決方案：

<code class="js">function getStyleById(id) {
    return getAllStyles(document.getElementById(id));
}

function getAllStyles(elem) {
    if (!elem) return []; // Element does not exist, return empty list.
    var win = document.defaultView || window, style, styleNode = [];
    if (win.getComputedStyle) { /* Modern browsers */
        style = win.getComputedStyle(elem, '');
        for (var i = 0; i < style.length; i++) {
            styleNode.push(style[i] + ':' + style.getPropertyValue(style[i]));
            // ^name        ^value
        }
    } else if (elem.currentStyle) { /* IE */
        style = elem.currentStyle;
        for (var name in style) {
            styleNode.push(name + ':' + style[name]);
        }
    } else { /* Ancient browsers..*/
        style = elem.style;
        for (var i = 0; i < style.length; i++) {
            styleNode.push(style[i] + ':' + style[style[i]]);
        }
    }
    return styleNode;
}</code>

這裡有一個細分：

• 迭代getCompulatedStyle 提供的樣式物件以獲得所有樣式屬性及其值。
• 對於下列瀏覽器支援 currentStyle (IE)，迭代該物件。
• 透過直接迭代處理內聯樣式元素的 style 屬性。
• 結果是格式為「propertyName:propertyValue」的字串陣列。

以上是如何透過 ID 檢索 HTML 元素的所有內聯和外部樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！