如何使用 JavaScript 通过 ID 获取应用于 HTML 元素的所有样式属性及其值？

在 JavaScript 中通过 ID 获取元素的样式属性

简介

需要检索所有样式属性及其仅使用 HTML 元素的 ID 来应用值？这个问题深入探讨了如何做到这一点。

理解问题

目标是创建一个函数 getStyleById，它获取元素的 ID并返回所有样式属性及其相应值的列表。此函数应考虑外部 CSS 文件中定义的内联属性和样式属性。

制定解决方案

要实现此目的，请考虑以下方法：

• 循环 CSSStyleDeclaration 对象 (getCompulatedStyle)： 迭代 CSSStyleDeclaration 对象的索引，使用 getPropertyValue 获取每个属性名称的值。
• 用于in 循环 for currentStyle（IE 独有）： 对 currentStyle 对象使用普通的 for in 循环，该对象仅存在于 Internet Explorer 中。
• 类似地循环内联样式： 使用相同的循环方法来检索内联样式属性。

代码实现

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

function getAllStyles(elem) {
    if (!elem) return []; // Element does not exist, 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 browser..*/
        style = elem.style;
        for (var i=0; i<style.length; i++) {
            styleNode.push( style[i] + ':' + style[style[i]] );
        }
    }
    return styleNode;
}</code>

用法

使用此函数中，只需使用元素的 ID 调用 getStyleById 即可。例如：

<code class="javascript">console.log(getStyleById('my-element'));</code>

这将打印一个数组，其中包含应用于 ID 为“my-element”的元素的所有样式属性及其值。

以上是如何使用 JavaScript 通过 ID 获取应用于 HTML 元素的所有样式属性及其值？的详细内容。更多信息请关注PHP中文网其他相关文章！