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是您要应用样式的元素。

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

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

Answer 2

使用jQuery可以轻松完成。以下是示例代码： 如果您是jQuery的新手，并且您不知道如何添加和工作，请关注this link

$(document).ready(function(){
    $("#d").css('background-color', '#444444').css('width', '50px').css('height',     '20px').css('display', 'inline-block');
});

对于javascript代码，我不自信，但对于jQuery，我确信它会起作用。

如果我错了，请纠正我。

Answer 3

这个？

    function transferComputedStyle(node) {
        var cs = getComputedStyle(node, null);
        var i;
        for (i = 0; i < cs.length; i++) {
            var s = cs[i] + "";
              node.style[s] = cs[s];
        }
    }
    function transferAll() {
        var all = document.getElementsByTagName("*");
        var i;
        for (i = 0; i < all.length; i++) {
            transferComputedStyle(all[i]);
        }
    }

只需调用transferAll onload或者whereever。

Answer 4

看来这个图书馆会做你想要的：https://github.com/lukehorvat/computed-style-to-inline-style

将HTML元素的计算CSS转换为内联CSS。

在内部使用Window.getComputedStyle。