JavaScript获取当前应用于元素的样式列表

JavaScript get list of styles currently applied to an element

本文关键字：样式 列表 元素 应用于 获取 JavaScript      更新时间：2023-09-26

仅列出渲染样式，而不是未应用的任意样式

我尝试了很多方法来将样式应用于某个元素，但都是空白的。

请不要引用getComputedStyle作为解决方案，除非你能解决垃圾退货问题。

主要问题是window.getComputedStyle(document.querySelector('ANY ELEMENT')).fill将返回"rgb(0, 0, 0)"，这在几乎任何情况下都是而不是正确的样式，并且没有明显的方法来确定它是否实际应用。

上面的例子并不是唯一的问题案例；CCD_ 4返回了大量错误的规则，如果应用这些规则，将极大地改变页面的外观。

静态解析不是一个选项，因为有些情况下.css文件位于另一台没有跨源头的服务器上；这也隐藏了通常在CCD_ 5中发现的样式。

有没有什么方法可以得到一个应用样式的列表，而不需要其他东西？

根据要求，此代码将演示问题（在Chrome上）：

var all = document.getElementsByTagName('*');
for(var i in all)
    if (all[i].style) all[i].style.cssText = window.getComputedStyle(all[i]).cssText;

编辑：我的答案有适用于所有浏览器的代码。我保留上面的评论线程。

以下是不需要检查深度的版本。代码中的问题是上一个元素中内联样式的赋值将影响下一个结果的getComputedStyle结果。这意味着getComputedStyle的值在循环中总是在变化。您可以先将它存储在这样的数组中。

var all = document.getElementsByTagName('*');
tmpArr = []
for(var i in all) {
    if (all[i].style) {
        tmpArr[i] = window.getComputedStyle(all[i]).cssText;
    }
}
for(var i in all) {
    if (all[i].style) {
        all[i].style.cssText = tmpArr[i]; ;
    }
}
console.log("finish");

您可以将tmpArr[i] = window.getComputedStyle(all[i]).cssText;更改为tmpArr[i] = window.getComputedStyle(all[i]).cssText + "-webkit-text-fill-color:#691099!important";来测试它是否工作

如果你打开检查器会很慢，因为有太多的内联样式，但如果你只需要将样式设置为内联样式，它就会解决问题。

部分答案（已更新）：

通过调用我的函数getRenderedStyles:，可以只获得活动样式

getRenderedStyles现在绕过活动样式表以获得更准确的输出

function getRenderedStyles(element) {
    var tmpele, tmpstyle, elestyle, varstyle, elecolor, eletag;
    var styles   = {};
    var defstyle = {};
    elestyle   = window.getComputedStyle(element);
    elecolor   = elestyle.color; 
    eletag     = element.tagName;
    var frag = document.createDocumentFragment();
    frag.appendChild(document.documentElement);
    tmpele   = document.appendChild(document.createElement(eletag));
    tmpstyle = window.getComputedStyle(tmpele);
    styles['color']     = elecolor===tmpstyle.color?undefined:elecolor;
    tmpele.style.color  = elecolor; // workaround for color propagation on other styles 
    for (var i in tmpstyle)
        defstyle[i] = tmpstyle[i];
    tmpele.remove();
    document.appendChild(frag);
    varstyle = element.style;
    for (var i in varstyle) {
        if ((((typeof varstyle[i])==="string"))&&(i!=="cssText")) {
            if ((defstyle[i]!==elestyle[i]))
                styles[i] = elestyle[i];
        }
    }
    return styles;
}

遗憾的是，在某些情况下，浏览器似乎仍然会返回无效的样式。经常改变元素的位置。

为了验证这一点，您可以运行以下代码，该代码考虑了父/子继承，试图将当前样式正确应用于页面：

function DOMDepth(element) {
    var cur  = element;
    var deep = 0;
    while(cur.parentNode)
        deep++, cur = cur.parentNode;
    return deep;
}
function getElementsByDepth() {
    var all = document.getElementsByTagName('*');
    var depth_map = {};
    var deepest   = 0;
    for(var i in all) {
        var depth = DOMDepth(all[i]);
        deepest   = depth>deepest?depth:deepest;
        depth_map[depth] = depth_map[depth] || [];
        depth_map[depth].push(all[i]);
    }
    depth_map['deepest'] = deepest;
    return depth_map;
}
function inlineComputedStyles() {
    var depth_map = getElementsByDepth();
    for (var i = depth_map.deepest; i>0; i--) {
        var elements = depth_map[i];
        for (var j in elements) {
            var styles = getRenderedStyles(elements[j]);
            for (var k in styles) {
                elements[j].style[k] = styles[k];
            }
        }
    }
}

我已经测试了前面的内容，可以确认它没有出现问题中片段的颜色问题。遗憾的是，我不确定为什么有些元素仍然会发生变化，或者是否有办法解决它

特别感谢冯指出继承问题。

相关文章：