首页 > web前端 > css教程 > 如何在 JavaScript 中使用元素的 ID 提取该元素的所有应用样式?

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

Susan Sarandon
发布: 2024-10-29 05:11:03
原创
638 人浏览过

How to Extract All Applied Styles for an Element Using Its ID in JavaScript?

如何使用元素的 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中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板