如何使用 JavaScript 通过 ID 获取应用于 HTML 元素的所有样式属性及其值？-css教程-PHP中文网

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

Patricia Arquette

发布： 2024-10-28 20:44:30

原创

350 人浏览过

How can I get all the style attributes and their values applied to an HTML element by its ID using JavaScript?

在 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中文网其他相关文章！