通过 JavaScript 将 CSS 样式转换为内联样式答案

【问题标题】：CSS style to inline style via JavaScript通过 JavaScript 将 CSS 样式转换为内联样式
【发布时间】：2014-09-25 16:19:54
【问题描述】：

我想将特定元素的所有 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 样式重写任何现有的内联样式。

【问题讨论】：

这会比你想象的要难很多，而且你不应该真的需要它。
@adeneo 相信我，我真的需要它。
@doniyor 只要我的脚本的其他部分很大，我不希望我的页面中有任何外部库，所以请不要使用 JQuery。
我猜样式在样式表中，所以首先你必须找到样式表或样式标签，然后你必须解析样式表以找到匹配的选择器，然后你必须解析所有样式并将它们全部添加到元素中。祝你好运！
@adeneo 这不是必须的。我知道 getComputedStyle 是为我做的。我需要做的就是从 getComputedStyle 中获取所有内容并将其放入元素的样式中。但我无法让它工作。

标签： javascript css styles inline

【解决方案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 是您要应用样式的元素。

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

我不知道您为什么需要这样做，但在我看来，这确实是一种肮脏的方法。我个人不会反对它。

【讨论】：

仍然不适合我，但我想你快到了。老实说，我发现这种在画布中呈现任何元素的方法非常简单，因此，为了将任何元素转换为 svg，我需要内联样式。这就是我要说的：developer.mozilla.org/en-US/docs/Web/HTML/Canvas/…
这是另一种东西。我对画布不熟悉，您询问了一个函数，可以将任何样式应用于元素的内联。这就是我所做的。除了这些，我无能为力了......
我只需要那个内联样式代码。我自己编写了代码的其他部分。但是您的功能似乎不起作用。
它可以工作，尝试在这个页面上使用控制台在元素#answers-header 上运行它，你会看到所有样式都将添加到 dom 中。这是截图：i.imgur.com/3I3REQn.jpg
是的！有用！出于某种原因，它对我不起作用。也许问题出在我的代码上，但无论如何你已经获得了 +1。谢谢。

【解决方案2】：

看来这个库可以满足你的需求：https://github.com/lukehorvat/computed-style-to-inline-style

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

在内部使用 Window.getComputedStyle。

【讨论】：

【解决方案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 或其他任何地方。

【讨论】：

【解决方案4】：

我认为接受答案的问题（谢谢你！）是它试图从计算样式转移到element 样式的properties 之一是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 中试过）

【讨论】：

【解决方案5】：

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

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

对于 javascript 代码我没有信心，但对于 jQuery，我确信它会起作用。

如果我错了，请纠正我。

【讨论】：