map .css() method results into an array in jquery

Question

in my program, I try to copy an element, using .clone() method, but this method doesnt copy the element's styles, so I have to translate them one by one like this :

            var style = {
                "position":"absolute",
                "color": $(demo[i][1]).css("color"),
                "width": $(demo[i][1]).width(),
                "height": $(demo[i][1]).height(),
                "font-size": $(demo[i][1]).css("font-size"),
                "font": $(demo[i][1]).css("font"),
                "text-align": $(demo[i][1]).css("text-align"),
                "padding-left": $(demo[i][1]).css("padding-left"),
                "padding-right": $(demo[i][1]).css("padding-right"),
                "padding-top": $(demo[i][1]).css("padding-top"),
                "padding-bottom": $(demo[i][1]).css("padding-bottom"),
                }

and then use .css method to apply these styles, but it seems like a stupid idea to copy these one by one. so is there any better way to copy an element so its styles are also copied, than .clone() method, and if not, is there any way to automatically mapp all possible css() results without going to all of these troubles ?

---

here's my new approach, any better way ?

var styleList = ['background', 'border', 'outline','font', 'list-style', 'padding', 'display', 'float','overflow', 'visibility', 'width', 'height', 'border-collapse', 'border-spacing', 'caption-side', 'empty-cells', 'table-layout', 'color', 'direction','letter-spacing', 'line-height', 'text-align', 'text-decoration', 'text-indent', 'text-transform', 'vertical-align', 'white-space', 'word-spacing']

var style = {'position':'absolute'}

$.each( styleList, function(i, property){ style[property]= original.css(property) });

Answer 1

This is a great example of why you should use CSS Classes instead of styles directly.

If you put everything into a CSS class, then all you would have to do is call the addClass() method on the cloned element. I've not tested it, but I expect you'll find that this is actually copied when the element is cloned anyway so you won't event have to do it.

Respone to Comment:

You website should have presentation separate from the code. If you're struggling with inherited properties, then maybe you need to look at the design of your site. Separating all presentation into CSS is good practice.

Also, to check if an element has a class, use hasClass() function. There is no need to split the attribute then iterate the array, so,

var classList = $('#divId').attr('class').split(' '); 
$.each( classList, function(index, item){ 
    if (item==='someClass') { //do something } 
}); 

Becomes:

if ($('#divId').hasClass('someClass')){
    //do something
}