Question

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

我有：

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

和

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

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

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

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

Answer 1

您可以这样做：

function applyStyle(el) {
    s = getComputedStyle(el);
    for (var key in s) {
        var property = key.replace(/\-([a-z])/g, function(v) { return v[1].toUpperCase(); });
        el.style[property] = s[key];
    }
}

var 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或者任意。

Answer 4

该库似乎可以满足您的需求：https://github.com/lukehorvat/computed-style-to-inline-style

将HTML元素的计算CSS转换为嵌入式CSS。

内部使用Window.getComputedStyle。

Answer 5

我认为已接受答案的问题（谢谢你！）是它试图从 propement 风格转移的el角色之一计算样式是 cssText。

如果我们从传输 cssText 和其他实际上是方法的属性中排除，它会起作用！

因此，基于已接受的答案和 this answer，我得到了：

var el = document.querySelector("#answer-25097808 > div > div.answercell.post-layout--right > div.s-prose.js-post-body > pre"); // change yourId to id of your element, or you can write “body” and it will convert all document
var els = el.getElementsByTagName("*");

for(var i = -1, l = els.length; ++i < l;){
    el = els[i]
    s = getComputedStyle(el)
    for (let styleKey in el.style) {
        for (let computedStyleKey in s) {
            let computedStyleKeyCamelCase = computedStyleKey.replace(/\-([a-z])/g, v => v[1].toUpperCase());
            if ((typeof el.style[styleKey] != "function") && (styleKey != 'cssText')){
                if(styleKey == computedStyleKeyCamelCase) {
                    el.style[styleKey] = s[computedStyleKey];
                }
            }
        }
    }
}

P.S.：上面的代码应该在开发者工具控制台中运行（在 Chrome 中尝试过）

CSS样式通过JavaScript内联样式

5 个答案: