將 javascript 計算樣式從一個元素設置/復制到另一個元素

Question

所以我試圖復制適用於一個元素（類/id/tagName/屬性等）的所有樣式。 到目前為止，我發現我可以復制元素的計算樣式，只有一個問題......可以將它應用於外部元素；/

或以不同的方式復制所有樣式。

（這是我得到的：/） http://jsfiddle.net/8KdJd/2/

   //queriks mode + minor changes to retrive the computed style
function getCS(el)
{
    if (el.currentStyle)
        var y = el.currentStyle;
    else if (window.getComputedStyle)
        var y = document.defaultView.getComputedStyle(el,null);
    return y;
}
function setCS(el,cs)
{
    if (el.currentStyle)
    {

        el.currentStyle = cs;
        el.style = cs;
    }
    else if (window.getComputedStyle)
    {el.style = cs 
    }

}


var myLink = document.getElementById('myLink');
var anotherLink = document.getElementById('anotherLink');

var CS_myLink = getCS(myLink);
setCS(anotherLink,CS_myLink);

Answer 1

更新：正如@icl7126 所建議的，這里有一個較短的版本，用於幾乎相同的用法。 請記住，如果未預編譯，此代碼將無法在大多數/較舊的瀏覽器上運行。

原始（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)))
}

預編譯（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));
  });
}

#

原始答案發布於 13 年 11 月。 當時不支持 CSS 變量。 （2014 年 7 月首次在 Firefox 上介紹）

#

就是這樣！ 我知道了 ：）

我看到很多人都在看這個問題，所以下面是更詳細和干凈的代碼。

 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 2

使用setProperty 、 getPropertyValue和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)))
}

有用的 MDN 文檔： getComputedStyle和CSSStyleDeclaration

Answer 3

計算樣式不保留優先級信息（ ... !important ），因此getComputedStyle()不會返回樣式優先級，因此上面（在接受的答案中）的computedStyle.getPropertyPriority(key)樣式getComputedStyle() computedStyle.getPropertyPriority(key) ) 將不起作用 - 它總是返回'' 。

如果要確保計算的樣式始終優先，則明確設置優先級：

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