Отсоединить стиль элемента от 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 всегда имеет идентификатор для идентификации)

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

Мне нужно сделать это на стороне клиента, это значит, что я буду работать с javascript, jquery и т.д ...

Answer 1

Если у вас есть большая часть файлов, с которыми вы хотите это сделать, то, вероятно, вы захотите написать скрипт в HLL с приличным парсером HTML (я рекомендую Python с lxml или BeautifulSoup), изатем запустите его над своим кодом.

В 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, если бы вы действительно этого хотели.

О, вам нужно выполнить это на стороне клиента?Ну, вы можете сделать почти то же самое, что и псевдокод, описанный выше в jQuery, кроме записи файла (вы будете писать элемент стиля в dom, и вам нужно будет использовать методы jQuery для выбора элементов и тестирования дляатрибуты), хотя я не совсем понимаю, почему вы хотите сделать это на стороне клиента .

Answer 2

Почему?Нет причин делать это в этот момент.Если вам нужно применить стиль к другим элементам, у которых его нет, сделайте что-то вроде этого:

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

edit:

В свете вашего комментарияВы могли бы сделать что-то вроде этого:

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, поэтому замените его тем, что вы хотите.Это по-прежнему предполагает, что все элементы имеют идентификаторы.Я не уверен, что это действительно стоит - если у вас все равно будет один стиль на элемент, тогда это очень большая таблица стилей.