Javascript 如何通过只给出元素的id来获取元素的所有应用样式？

我试图编写一个函数，它获取元素的Id，并给出应用于该元素的所有样式属性（及其值）的列表。它应该考虑联机样式以及CSS文件中定义的样式。

当我在参数中提供样式属性名称和元素id时，我可以让函数工作，但我只想传递元素id，应该能够获得所有样式属性和值

函数应该类似于getStyleById（elementId）

PFB到目前为止的代码片段：

var styleNode = [];
    var styles;
    var sty = x.style;

    var len = sty.length;

    for (var i = 0; i < len; i++) {
        styles = sty.item(i);

        if (x.currentStyle)     //IE for External/Global Styles
        {
            var a = x.currentStyle[styles];

            styleNode.push(styles + ":" + a);
        }
        else if (document.defaultView && document.defaultView.getComputedStyle)    //Firefox,Chrome,Safari for External/Global Styles
        {
            var b = document.defaultView.getComputedStyle(x, "").getPropertyValue(styles);

            styleNode.push(styles + ":" + b);
        }
        else           //Works in Inline Styles only
        {
            var c = x.style[styles];

            styleNode.push(styles + ":" + c);
        }
    }

var styleNode=[]；
var风格；
var sty=x.style；
var len=sty.length；
对于（变量i=0；i

任何帮助都将不胜感激

问候,

---

Manishehakhawat使用以下方法：

• 循环遍历

  CSSStyleDeclaration

  对象（）的索引，以获得每个已知的属性名。使用此名称获取值。
  代码优化：不要对每个迭代使用getComputedStyle，而是将其存储在循环外的变量中
• 对（对象中的名称）使用普通的
  循环

  currentStyle

• 对内联样式使用相同的循环方法

代码：

函数getStyleById（id）{ 返回getAllStyles（document.getElementById（id））； } 函数getAllStyles（elem）{ 如果（！elem）return[]；//元素不存在，则为空列表。 var win=document.defaultView | |窗口、样式、样式节点=[]； if（win.getComputedStyle）{/*现代浏览器*/ style=win.getComputedStyle（元素“”）；

---

对于（var i=0；i获取应用样式：使用

document.querySelector（'#concept-app'）.getAttribute（'style'）

这将以字符串形式返回：

“宽度：1280px；最大宽度：1280px；自对齐：居中；页边距顶部：1px；页边距底部：1px；”

您可以使用

.split（“；”）

将其进一步分解为数组

---

获取计算样式（最终应用的样式）：

---

window.getComputedStyle（document.querySelector（“#概念应用”））.cssText

我想你没有提到什么不起作用检查也许这会有帮助-@LiviuT。当我在参数中提供样式属性名称和元素id时，我可以让函数工作，但我只想传递元素id，应该能够获得所有样式属性和值。非常感谢：）。…它工作得很好…但唯一的问题是我只给元素提供了2个CSS样式属性，而这个函数返回的值包含很多CSS属性>FirstId

，而函数返回的值包含………..背景附件：滚动、背景剪辑：边框框、背景颜色：rgb（170172204）、背景图像：无、背景原点：填充框等……@Manishehawa是否只获取内联样式（不包含样式表样式）那么您应该只使用

else

块中的代码：

函数getAllStyles（elem）{if（！elem）return[]；for（var styleNode=[]，style=elem.style，i=0；这段代码太棒了！有没有办法只获取样式表或特定样式表应用的样式？类似于chrome的开发工具css样式分解。循环遍历所有样式表，并使用matches/matchesSelector测试每个选择器。实现非常简单，值得提出自己的问题。Esp特别是如果您想知道哪个样式是活动的。最后一行代码中有一个错误：样式[style[i]]将返回“undefined”，因为样式[i]返回“backgroundImage”，但它必须是“backgroundImage”！不完全清楚如何将其应用于具有id的特定元素（例如）。
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;
}