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.