CSS 样式通过 JavaScript 内联样式

Question

我想将特定元素的所有 CSS 样式添加到其内联样式属性中。例如：

我有：

 <div id="d"></div>

和：

#d { background: #444444; width: 50px; height: 20px; display: inline-block; }

现在我想要一个 JavaScript 函数将我的 div 变成这样：

<div id="d" style="background: #444444; width: 50px; height: 20px; display: inline-block;"></div>

请帮我。而且，顺便说一下，我不希望任何 CSS 样式重写任何现有的内联样式。

Answer 1

你可以这样做：

function applyStyle(el) {
    s = getComputedStyle(el);

    for (let key in s) {
        let prop = key.replace(/\-([a-z])/g, v => v[1].toUpperCase());
        el.style[prop] = s[key];
    }
}

let x = document.getElementById('my-id');
applyStyle(x);

x要将样式应用到的元素在哪里。

基本上这个函数获取元素的计算样式，然后将每个属性（如填充、背景、颜色等）复制到元素的内联样式。

我不知道你为什么需要这样做，但是，在我看来，但它确实是一种肮脏的方法，我个人不建议使用它。