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>

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

3 个答案: