22

所以我试图复制适用于一个元素的所有样式（类 / 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);
4

3 回答 3

25

更新：正如@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];

            }   
    }   

};
于 2013-11-06T22:32:58.853 回答
7

使用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

于 2018-04-23T13:17:44.667 回答
1

计算样式不保留优先级信息（... !important），因此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')
  )
}
于 2020-06-27T17:46:11.847 回答