如何獲得所有內聯樣式的列表？

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>