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中显然没有print语句，所以用你想要的替换它。这仍然假设所有元素都有id。我不确定这实际上是否值得 - 如果你要为每个元素设置一种样式，那么这是一个非常大的样式表。

Answer 2

如果你有大量的文件需要这样做，你可能要做的就是在HLL中编写一个带有不错的HTML解析器的脚本（我推荐使用带有lxml或BeautifulSoup的Python），以及然后在你的代码上运行它。

在psuedo python中：

css = {}
with(open(argv[1]) as htmlfile): 
  for element in HTMLParser.parse(htmlfile):
    if element.hasAttributes(['style', 'id']):
        css[element.attribute('id')] = element.attribute('style')
out = ''
for id, style in css.iteritems():
    out += '#%s {' % id
    out += ";\n".join(style.split(';')
    out += "\n}\n"
open(argv[1] + "-new.css", 'w').write(out)

然后，假设您可以访问unix工具，find /path/to/html/root -name "*html" -exec /path/to/your/script {} \;之类的东西会在所有文件上运行它。如果你真的想要的话，你可以用sed作为oneliner来完成这个任务。

哦，你需要做客户端吗？好吧，除了编写文件之外，你可以做与jQuery上面的伪代码完全相同的事情（你要在dom中编写一个样式元素，你需要使用jQuery的方法来选择元素和测试属性），虽然我很困惑你为什么要这样做客户端。

从html中分离元素样式

2 个答案: