Set / Copy javascript computed style from one element to another

Question

So I am trieing to copy all the style that apply on one element ( class / id / tagName / attribute etc. ). So far I found out that I can copy the computed style of an elemen

Answer 1

Computed styles do not retain priority information (... !important) so getComputedStyle() will not return style priorities and therefore computedStyle.getPropertyPriority(key) above (in the accepted answer) will not work - it will always return ''.

If you want to ensure the computed styles always take priority then explicitly set the priority:

function copyNodeStyle(sourceNode, targetNode) {
  const computedStyle = window.getComputedStyle(sourceNode);
  Array.from(computedStyle).forEach(
    key => targetNode.style.setProperty(key, computedStyle.getPropertyValue(key), 'important')
  )
}

Answer 2

Update: As @icl7126 suggested, here is a shorter version for practically the same usage. good thing to remember that this code would not run on most/older browser if not pre-compiled.

Original (ES 2017):

function copyNodeStyle(sourceNode, targetNode) {
  const computedStyle = window.getComputedStyle(sourceNode);
  Array.from(computedStyle).forEach(key => targetNode.style.setProperty(key, computedStyle.getPropertyValue(key), computedStyle.getPropertyPriority(key)))
}

Precompiled (ES 5):

function copyNodeStyle(sourceNode, targetNode) {
  var computedStyle = window.getComputedStyle(sourceNode);
  Array.from(computedStyle).forEach(function (key) {
    return targetNode.style.setProperty(key, computedStyle.getPropertyValue(key), computedStyle.getPropertyPriority(key));
  });
}

#

original answer posted on Nov '13. CSS variables were not supported back then. (first introduces on firefox on Jul 2014)

#

Thats it! I got it :)

Iv'e seen that lots of people view this question, So below is more detailed and clean code.

var copyComputedStyle = function(from,to){
    var computed_style_object = false;
    //trying to figure out which style object we need to use depense on the browser support
    //so we try until we have one
    computed_style_object = from.currentStyle || document.defaultView.getComputedStyle(from,null);

    //if the browser dose not support both methods we will return null
    if(!computed_style_object) return null;

        var stylePropertyValid = function(name,value){
                    //checking that the value is not a undefined
            return typeof value !== 'undefined' &&
                    //checking that the value is not a object
                    typeof value !== 'object' &&
                    //checking that the value is not a function
                    typeof value !== 'function' &&
                    //checking that we dosent have empty string
                    value.length > 0 &&
                    //checking that the property is not int index ( happens on some browser
                    value != parseInt(value)

        };

    //we iterating the computed style object and compy the style props and the values 
    for(property in computed_style_object)
    {
        //checking if the property and value we get are valid sinse browser have different implementations
            if(stylePropertyValid(property,computed_style_object[property]))
            {
                //applying the style property to the target element
                    to.style[property] = computed_style_object[property];

            }   
    }   

};

Answer 3

A bit shorter solution using setProperty, getPropertyValue and getPropertyPriority.

function copyNodeStyle(sourceNode, targetNode) {
  const computedStyle = window.getComputedStyle(sourceNode);
  Array.from(computedStyle).forEach(key => targetNode.style.setProperty(key, computedStyle.getPropertyValue(key), computedStyle.getPropertyPriority(key)))
}

Useful MDN docs: getComputedStyle and CSSStyleDeclaration