将 javascript 计算样式从一个元素设置/复制到另一个元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19784064/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set / Copy javascript computed style from one element to another
提问by Adi Darachi
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 element, Just one problem ... couldend apply it on outher element ;/
所以我试图复制适用于一个元素（类/id/tagName/属性等）的所有样式。到目前为止，我发现我可以复制元素的计算样式，只有一个问题......可以将它应用于外部元素；/
or diffrend way to copy all the style.
或以不同的方式复制所有样式。
(this is as far as i got :/ ) http://jsfiddle.net/8KdJd/2/
（这是我得到的：/） 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);
回答by Adi Darachi
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.
更新：正如@icl7126 所建议的，这里有一个较短的版本，用于几乎相同的用法。请记住，如果未预编译，此代码将无法在大多数/较旧的浏览器上运行。
Original (ES 2017):
原版（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):
预编译（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)
原始答案发布于 13 年 11 月。当时不支持 CSS 变量。（2014 年 7 月首次在 Firefox 上介绍）
#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];
}
}
};
回答by icl7126
A bit shorter solution using setProperty, getPropertyValueand getPropertyPriority.
使用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)))
}
Useful MDN docs: getComputedStyleand CSSStyleDeclaration
有用的 MDN 文档：getComputedStyle和CSSStyleDeclaration
