如何仅使用元素 ID 检索元素的所有样式？

如何仅使用元素的 ID 来收集元素的所有样式

在这个问题中，我们的目标是开发一个函数 getStyleById，该函数检索指定元素的所有样式属性及其对应值（仅给出其 ID）。此函数应同时考虑内联样式和 CSS 文件中定义的样式。

解决方案：

要实现此目的，我们可以采用综合方法：

1. 循环属性： 使用循环遍历 CSSStyleDeclaration 对象 (getCompulatedStyle) 来检索所有已知属性名称。对于每个名称，使用 getPropertyValue 获取值。
2. 优化循环：通过将 getCompulatedStyle 存储在循环外部的单独变量中来提高效率。
3. 内联样式处理:利用普通的 for…in 循环来检索内联样式信息。

代码实现：

<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>

通过合并这些方法，我们的函数可以有效地收集给定元素的所有应用样式，增强其对各种任务的实用性。

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