How to get the "computed" CSS style of a box and apply it to another box?

If I create a new element and I want to give it the style of another element I would likely make the new element share the same class of the old element, as with:

element.classList.add(".shared_class");

But primarily for the sake of learning, is there an alternative method which may be used in a narrower context of say inline styles or just the as-is “computed box-model styles” (evident from Google Chrome development tool in Elements → Computed)?

Perhaps window.getComputedStyle(ELEMENT) method ? If so, what is the “setComputedStyle” which will set what I get to the new element?

You can do it by setting cssText. It only seems to work with inline styles (which are a BAD idea 99% of the time) and doesn’t work with IE if you’re worried about that client base.

1 Like
window.getComputedStyle(element);
window.getComputedStyle(element, pseudoElt);

This returns a live object containing the elements computed styles.
If the styling changes the object is updated.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.