首页 > web前端 > css教程 > 如何通过 ID 检索 HTML 元素的所有内联和外部样式?

如何通过 ID 检索 HTML 元素的所有内联和外部样式?

Patricia Arquette
发布: 2024-11-03 07:37:30
原创
432 人浏览过

How to Retrieve All Inline and External Styles of an HTML Element by ID?

通过元素 ID 检索 HTML 元素的样式属性

您想要创建一个函数,在给定元素的 ID 时,检索应用于该元素的所有样式,内联和外部定义。

这里有一个全面的解决方案:

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

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

这里有一个细分:

  • 迭代 getCompulatedStyle 提供的样式对象以获取所有样式属性及其值。
  • 对于支持 currentStyle (IE) 的浏览器,迭代该对象。
  • 通过直接迭代元素的样式属性来处理内联样式。
  • 结果是格式为“propertyName:propertyValue”的字符串数组。

以上是如何通过 ID 检索 HTML 元素的所有内联和外部样式?的详细内容。更多信息请关注PHP中文网其他相关文章!

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