如何僅使用元素 ID 檢索元素的所有樣式？

如何只使用元素的ID 來收集元素的所有樣式

在這個問題中，我們的目標是開發一個函數getStyleById，此函數會擷取指定元素的所有樣式屬性及其對應值（僅給出其ID）。此函數應同時考慮內聯樣式和 CSS 檔案中定義的樣式。

解：

要達到此目的，我們可以採用綜合方法：

1. 循環屬性：
2. 循環屬性：
3. 循環屬性：

循環屬性：

<code class="javascript">function getStyleById(id) {
    return getAllStyles(document.getElementById(id));
}
function getAllStyles(elem) {
    if (!elem) return []; // Empty list if element is absent.
    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]) );
        }
    } else if (elem.currentStyle) { /* IE */
        style = elem.currentStyle;
        for (var name in style) {
            styleNode.push( name + ':' + style[name] );
        }
    } else { /* Ancient browser..*/
        style = elem.style;
        for (var i=0; i<style.length; i++) {
            styleNode.push( style[i] + ':' + style[style[i]] );
        }
    }
    return styleNode;
}</code>

循環屬性：

使用循環遍歷CSSStyleDeclaration 物件(getCompulatedStyle) 來擷取所有已知屬性名稱。對於每個名稱，使用 getPropertyValue 取得值。

最佳化循環：透過將 getCompulatedStyle 儲存在循環外部的單獨變數中來提高效率。 內嵌樣式處理:利用普通的 for…in 迴圈來擷取內聯樣式資訊。 程式碼實作：透過合併這些方法，我們的函數可以有效地收集給定元素的所有應用樣式，增強其對各種任務的實用性。

以上是如何僅使用元素 ID 檢索元素的所有樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！