将HTML元素中的CSS类替换为其在JavaScript中的CSS属性

Question

我正在尝试使用JavaScript (类似于屏幕截图)获取超文本标记语言页面的源代码。对于样式，我使用的是外部CSS。但是，当我获得HTML源代码时，样式将不会被应用，因为我将无法获得元素的CSS属性。

因此，我想知道是否可以将CSS类名替换为该类中定义的实际CSS属性。例如：

对于HTML元素，

<div class="exampleClass"><div>

和CSS，

.exampleClass {
    background-color:#FFFFFF;
}

那么使用Javascript提取的源代码将是

<div style="background-color:#FFFFFF;"><div>

我如何在JavaScript中做这件事？谢谢

Answer 1

function getCSSPropertiesBySelector(selector) {
    return [...document.styleSheets].map(stylesheet => {
        var g = [...stylesheet.cssRules].find(rule => rule.selectorText === selector);
        if (g) {
            return g.style.cssText;
        }
    }).find(r => r);
}

主要基于https://stackoverflow.com/a/16966533/1799147

getCSSPropertiesBySelector('.logo')
//"display: block; grid-area: I / I / I / I; width: 200px; height: 44px; margin-right: 24px;"

可能有更好的方法来做这件事，但它能完成工作。如果此示例中有重复的类，则不会起作用，如果在另一个样式表中具有相同的类，则可能希望将其更改为附加到属性

Answer 2

您可以在javascript中将所需的类分配给标记HTML。例如：

const div = document.createElement('div');
div.className = 'exampleClass';
document.body.appendChild(div);

或

div.classList.add('exampleClass');