How can I programmatically copy all of the style attributes from one DOM element to another

by

With getComputedStyle, you can get the cssText property which will fetch the entire computed style in a CSS string:

var completeStyle = window.getComputedStyle(element1, null).cssText;
element2.style.cssText = completeStyle;

Unfortunately, getComputedStyle isn’t supported by Internet Explorer, which uses currentStyle instead. Doubly unfortunate is the fact that currentStyle returns null for cssText, so the same method cannot be applied to IE. I’ll try and figure something out for you, if nobody beats me to it 🙂

I thought about it and you could emulate the above in IE using a for...in statement:

var completeStyle = "";
if ("getComputedStyle" in window)
    completeStyle = window.getComputedStyle(element1, null).cssText;
else
{
    var elStyle = element1.currentStyle;
    for (var k in elStyle) { completeStyle += k + ":" + elStyle[k] + ";"; }
}

element2.style.cssText = completeStyle;

More Related Contents:

  1. When is JavaScript’s eval() not evil?
  2. Remove element by id
  3. Check if an image is loaded (no errors) with jQuery
  4. onKeyPress Vs. onKeyUp and onKeyDown
  5. How do you check if a JavaScript Object is a DOM Object?
  6. innerText vs innerHTML vs label vs text vs textContent vs outerText
  7. Javascript/DOM: How to remove all event listeners of a DOM object?
  8. Why is the value of my input always empty if I store it in a variable?
  9. How can I loop through ALL DOM elements on a page?
  10. Manipulating innerHTML removes the event handler of a child element? [duplicate]
  11. What is the “hasClass” function with plain JavaScript?
  12. Is there a DOM event that fires when an HTML select element is closed?
  13. How to use getElementsByClassName in javascript-function? [duplicate]
  14. Get element’s CSS selector (when it doesn’t have an id)
  15. Using this inside an event handler
  16. How to scroll down with Phantomjs to load dynamic content
  17. Difference between Element.value and Element.getAttribute(“value”)
  18. Why is the variable holding the input value always logged as empty?
  19. Are event handlers in JavaScript called in order?
  20. HTML DOM: Which events do not bubble?
  21. Is it possible to get reference to comment element/block by JavaScript?
  22. Converting a recursive function into an asynchronous CPS implementation (javascript)
  23. What is “?:” notation in JavaScript?
  24. window.getSelection() gives me the selected text, but I want the HTML
  25. JQuery – animate moving DOM element to new parent?
  26. Unloading/Removing content from an iFrame
  27. What’s the most concise cross-browser way to access an element’s window and document?
  28. In JavaScript, how can I replace text in an HTML page without affecting the tags?
  29. How do I manipulate the SVG DOM and create elements?
  30. Removing element with jQuery?

Leave a Comment