Copy all Styles from one Element to Another using JS

avatar

Borislav Hadzhiev

Last updated: Jan 8, 2022

banner

Check out my new book

Copy all Styles from one Element to Another using JS #

To copy all styles from one element to another:

  1. Create the other element using the document.createElement() method.
  2. Get a string containing the styles of the original element.
  3. Assign the CSS string as cssText on the newly created element.

Here is the HTML for the examples in this article.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <style> #box { font-size: 2rem; color: white; margin-top: 10px; } </style> </head> <body> <div id="box" style="background-color: salmon; width: 150px; height: 150px"> Box content </div> <script src="index.js"></script> </body> </html>

And here is the related JavaScript code.

index.js
const box = document.getElementById('box'); // 👇️ Create another element const another = document.createElement('div'); another.innerHTML = 'Another content'; // 👇️ Get computed styles of original element const styles = window.getComputedStyle(box); let cssText = styles.cssText; if (!cssText) { cssText = Array.from(styles).reduce((str, property) => { return `${str}${property}:${styles.getPropertyValue(property)};`; }, ''); } // 👇️ Assign css styles to element another.style.cssText = cssText; // 👇️ (optionally) add the element to the DOM document.body.appendChild(another);

We used the createElement method to create a div element.

The window.getComputedStyle method returns an object containing the values of all CSS properties of the element.

We used the getComputedStyle method and not the style property because the getComputedStyle method takes external stylesheets into consideration and resolves computations contained by the values.

The cssText property returns the text of the element's styles, however is not supported by all browsers and sometimes returns an empty string.

If the property is not supported, we iterate over the computed styles to manually create the string that contains the element's styles.

The function we passed to the Array.reduce method gets called with each element in the array (CSS style property name).

We passed an empty string as the initial value for the str variable.

On each iteration, we append the current CSS property name and its value to the accumulated string and return the result.

The value we return from the callback function gets passed as the str variable in the next iteration.

After the last iteration, the cssText variable contains a string with all of the styles of the original element.

The last step is to assign the string to the element's style.cssText property.

You can optionally use the appendChild method to add the node to the end of the list of children of the element the method was invoked on.

In the example we called the appendChild method on the body element, but this could be any other node.

If I open the page from the example above, I can see that the styles from the first element have been successfully applied to the second.

styles applied to other element

And the elements look identical in my browser.

elements look identical

Use the search field on my Home Page to filter through my more than 3,000 articles.