如何仅通过提供元素的 id 来获取元素的所有应用样式？

Question

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

当我在参数中提供样式属性名称以及元素的 id 时，我可以使函数工作，但我只想传递元素的 id，并且应该能够获取所有样式属性以及值。

函数应该类似于getStyleById(elementId);

PFB 代码 sn-p 到目前为止：

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);
    }
}

Answer 1

使用以下方法：

• 循环遍历CSSStyleDeclaration 对象(getComputedStyle) 的索引以获取每个已知的属性名称。使用getPropertyValue + 这个名字来获取值。
  代码优化：每次迭代不要使用getComputedStyle，而是将其存储在循环外的变量中。
• 对currentStyle 使用普通的for ( name in object ) 循环。
• 对内联样式使用相同的循环方法

代码：

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;
}

Answer 2

要获得应用的样式：使用document.querySelector('#notion-app').getAttribute('style')。
这将作为字符串返回："width: 1280px; max-width: 1280px; align-self: center; margin-top: 1px; margin-bottom: 1px;".
您可以使用.split(';') 进一步将其分解为数组。

---

获取计算样式（最终应用的样式）：
window.getComputedStyle(document.querySelector('#notion-app'))).cssText