javascript - 从 html 中分离元素样式

Question

我有大量这样的 html 文件

<div style="min-height: 32px; padding: 5px; width: 800px; margin: 50px auto; overflow: auto; font-size: 12px;" class="selectable clearfix selected_layer" id="wrap">
<div class="selectable" id="l1" style="float: left; min-width: 64px; min-height: 32px; padding: 5px; margin: 5px; overflow: auto; width: 200px;"></div>
<div class="selectable" id="l2" style="float: right; min-width: 64px; min-height: 32px; padding: 5px; margin: 5px; overflow: auto;"></div></div>

如何分离元素样式并使其成为css(每个div总是有id来标识)

#wrap{
min-height: 32px; 
padding: 5px; 
width: 800px; 
margin: 50px auto; 
overflow: auto; 
font-size: 12px;
}
#l1{...}
#l2{...}
...

我需要在客户端完成，这意味着我将使用 javascript、jquery 等...

Answer 1

为什么？在这一点上没有理由这样做。如果您需要将样式应用于其他没有它的元素，请执行以下操作:

var style = element.style;
var i;
for (i in style) {
    other_element[i] = style[i];
}

编辑:

根据您的评论，您或许可以执行以下操作:

var elements = [...]; //collect together all the elements you need styles for
var i;
var j;
for (i = 0; i < elements.length; i++) {
    print('#' + elements[i].id + '{');
    for (j in elements[i].style) {
        print(j + ':'+elements[i].style[j] + ';');
    }
    print('}');
}

在 javascript 中显然没有打印语句，所以用你想要的替换它。这仍然假设所有元素都有 id。我不确定这是否真的值得 - 如果您无论如何要为每个元素使用一种样式，那么这是一个非常大的样式表。