如何获得所有内联样式的列表？

Question

有一种使用el.attributes查找 HTMLElement 上所有当前属性的简单方法，但我找不到内联样式的等效项。 我试过看看其他人是否遇到过这个问题，但似乎没有相关结果。

做这样的事情我能够找到所有可能的样式，但它也包括所有的功能和不相关的数据。

for( var style in el.style ){ 
    console.log(el.style[style]); 
}

对于一个循环来说，这是一种非常浪费的计算，循环可能会多达 300 多次迭代，并且有可能 100% 的内联样式实际上并未设置为任何内容。 有没有更好的办法？

Answer 1

注意：在发布此问题之前我确实有答案，但无论如何我还是要问它并认为这对其他人有帮助

节点返回的样式对象有一个length属性，它是当前定义的内联样式的数量。 您可以使用此属性将样式对象作为类似数组的结构进行循环，并且每个索引都返回定义的名称。

例子：

for (var i = 0, l = el.style.length; i < l; i++){
    console.log(el.style[i]); // an active inline-style
}

Answer 2

现代的做法是这样的：

 function getInlineStyle (element) { return Array.from(element.style).reduce((style, name) => { style[name] = element.style[name] return style }, {}) } const div = document.getElementById('foo') console.log(getInlineStyle(div))

 <div id="foo" style="width: 100px; margin-top: 10px;"></div>

Answer 3

如果您只需要一组内联 CSS 属性，您可以简单地将元素的style转换为具有扩展语法或Array.from的数组。

 function getInlineStyleProperties(elem){ return [...elem.style]; } console.log(getInlineStyleProperties(document.querySelector('div')));

 <div style="height: 20px; color: red;"></div>

要获得一个对象将集合属性映射到它们的值，您可以使用扩展语法将元素的style转换为数组以获取所有集合属性，映射它以创建键值对数组，并使用Object.fromEntries将其转换为对象。

 function getInlineStyles(elem){ return Object.fromEntries([...elem.style].map(x => [x, elem.style[x]])); } console.log(getInlineStyles(document.querySelector('div')));

 <div style="height: 20px; color: red;"></div>