Detach element style from html

Question

I have bulk of html file like this

<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>

How to detach element style and make it become css (each div always have id to identify)

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

I need to do it in client side, it mean I will work with javascript, jquery etc...

Answer 1

Why? There's no reason to do it at that point. If you need to apply the style to other elements that don't have it, do something like this:

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

edit:

In light of your comment, you might be able to do something like this:

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('}');
}

There's obviously no print statement in javascript, so substitute it with what you want. This still assumes that all elements have id's. I'm not sure that this is actually worthwhile - if you're going to have one style per element anyways, then that's a very big stylesheet.

Answer 2

If you have a bulk of files you want to do this to, what you're probably going to want to do is write a script in a HLL with a decent HTML parser ( I recommend Python with lxml or BeautifulSoup ), and then run it over your code.

In 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)

Then, assuming you have access to unix tools, something like find /path/to/html/root -name "*html" -exec /path/to/your/script {} \; will run it over all your files. You could probably do this whole task as a oneliner with sed if you really wanted to.

Oh, you need to do it client side? Well, you could do pretty much the same thing as the pseudocode above in jQuery, other than writing a file (you'd be writing a style element into the dom, and you'll need to use jQuery's methods for selecting elements and testing for attributes), although I'm confused as to why you'd want to do this client side.