如何在 JavaScript 中使用元素的 ID 提取该元素的所有应用样式？

如何使用元素的 ID 获取元素的所有应用样式

问题描述

创建一个函数来确定应用于元素的样式根据其 ID，必须考虑内联文件样式和 CSS 文件样式。虽然当前的实现接受元素的样式属性名称及其 ID，但目标是仅通过提供 ID 来获取所有样式属性。

答案

方法：

1. 迭代 CSSStyleDeclaration 对象： 获取 getCompulatedStyle 对象内的属性名称；使用 getPropertyValue 收集值。
2. 使用标准 For 循环： 对 currentStyle 使用此方法。
3. 结合相同的循环技术：应用此内联样式的方法。

代码：

function getStyleById(id) {
    return getAllStyles(document.getElementById(id));
}
function getAllStyles(elem) {
    // Check if element exists (empty list if not)
    if (!elem) return [];

    var win = document.defaultView || window, style, styleNode = [];

    // Modern browsers
    if (win.getComputedStyle) {
        style = win.getComputedStyle(elem, '');

        // Loop through style properties and gather values
        for (var i = 0; i < style.length; i++) {
            styleNode.push( style[i] + ':' + style.getPropertyValue(style[i]) );
        }
    } 
    // IE
    else if (elem.currentStyle) {
        style = elem.currentStyle;

        // Loop through currentStyle properties
        for (var name in style) {
            styleNode.push( name + ':' + style[name] );
        }
    } 
    // Ancient browsers
    else {
        style = elem.style;

        // Loop through inline styles
        for (var i = 0; i < style.length; i++) {
            styleNode.push( style[i] + ':' + style[style[i]] );
        }
    }

    // Return list of style properties
    return styleNode;
}

以上是如何在 JavaScript 中使用元素的 ID 提取该元素的所有应用样式？的详细内容。更多信息请关注PHP中文网其他相关文章！