Question

我正在尝试设置一种自动方式，将基于样式表的干净设计转换为丑陋的内联样式设计（用于新闻稿编辑器）。

是否可以获取适用于元素的所有样式（div，p，span，h1，h2等）并将它们作为内联应用于该元素？

所以不要在样式表中将我的风格变得漂亮和漂亮：

#topHeader { color: #222; background: red; width: 210px; height: 110px;}

让它像这样内联：

<div id="topHeader" style="color: #222; background: red; width: 210px; height: 110px;">

如果有人知道这是否可能，请尽可能向我发送正确的方向。

非常感谢：）

Answer 1

这可能对你很有意思：

IE：currentStyle
其他人：getComputedStyle

Answer 2

您可以使用您引用的DOM元素的.style成员执行此操作。使用你的例子，可能是这些内容（未经测试）：

var el     = document.getElementById('topHeader');
var styles = new Array();

for (var key in el.style) {
    // You'll probably need to do some more conditional work here...
    if (el.style[key]) {
        styles.push(key + ': ' + el.style[key]);
    }
}

el.setAttribute('style', styles.join('; '));

Answer 3

您可以迭代文档的styleSheets和规则：

$.each(document.styleSheets, function() {
    $.each(this.cssRules || this.rules, function() {
        var style = {};
        var styles = this.cssText.split(/;\s*/g);
        $.each(styles, function() {
            var parts = styles.split(/\:\s*/g);
            style[parts[0]] = parts[1];
        });
        $(this.selectorText).css(style);
    });
});

并非所有浏览器都公开.selectorText，而.cssText将需要特定于浏览器的解析。希望这足以指出你正确的方向。

Answer 4

我使用以下内容取得了一定的成功：

$('#parentidhere').find('*').each(function (i, elem){elem.style.cssText=document.defaultView.getComputedStyle(elem,"").cssText;});

某些样式，如用于更复杂样式的背景选择器似乎仍然消失，但我还没弄清楚原因。此外，这在旧版浏览器中不起作用，但在我的情况下无关紧要。

使用jQuery使内联样式

4 个答案: