JavaScript & copy style

Question

I am copying a table cell with javascript.

It works fine, just that it doesn\'t copy the style. I wanted to copy like below, but that didn\'t work. newCell.style=old

Answer 1

To copy all style elements from one node to another you can use

newCell.setAttribute('style', oRow.cells[1].getAttribute('style'))

Answer 2

eval('oRow.cells[1].style.'+strAttribute)

Never use eval like this(*). In JavaScript you can access a property whose name is stored in a string using square brackets. object.plop is the same as object['plop']:

to.style[name]= from.style[name];

(*: never use eval at all if you can help it. There are only a few very specific and rare occasions you need it.)

Is there any way to loop over the style elements

The style object is supposed to support the DOM Level 2 CSS CSSStyleDeclaration interface. You could loop over the rules and apply them to another element like this:

for (var i= from.style.length; i-->0;) {
    var name= from.style[i];
    to.style.setProperty(name,
        from.style.getPropertyValue(name),
        priority= from.style.getPropertyPriority(name)
    );
}

in IE?

No, IE does not support the whole CSSStyleDeclaration interface and the above won't work. However there is a simpler way not involving looping that will work on IE and the other browsers too:

to.style.cssText= from.style.cssText;

As simple as that! IE doesn't quite preserve the CSS text the way it should, but the difference doesn't matter for simple inline style copying.

However, as Pikrass said (+1), if you are copying a whole element and not just the styles, cloneNode is by far the most elegant way to do that.

Answer 3

You can copy a DOM Element with all its content (including attributes) with .cloneNode(true) :

var clonedTr = document.getElementById('id').cloneNode(true);

Then clonedTr is an exact copy of the tr #id. The "true" means you want to copy the content of the element.