Javascript 如何将所有用户提供的样式从一个对象复制到另一个对象
有人问了一个关于如何将css样式从一个对象复制到另一个对象的问题。普遍接受的答案是:Javascript 如何将所有用户提供的样式从一个对象复制到另一个对象,javascript,html,css,Javascript,Html,Css,有人问了一个关于如何将css样式从一个对象复制到另一个对象的问题。普遍接受的答案是: var p = document.getElementById("your_p_id"); var div = document.createElement("div"); div.innerHTML = "your div content"; div.style.cssText = document.defaultView.getComputedSt
var p = document.getElementById("your_p_id");
var div = document.createElement("div");
div.innerHTML = "your div content";
div.style.cssText = document.defaultView.getComputedStyle(p, "").cssText;
然而,我的情况有点不同。我有一个脚本,它创建一个span
来假定一个select
标记,然后隐藏select
。这使得CSS样式设计更容易,因为相对于坚定的select
标记,我可以更容易地设置span
的样式
当我使用cssText
将应用于select的任何样式复制到span时,它看起来就像一个select标记。由于所有内置样式都应用于span,而不仅仅是用户输入,因此我必须以数十种方式覆盖所有这些css属性,这超出了首先使用span标记的目的
有没有办法只复制用户提供的样式,而不是复制用于设置元素样式的整个样式表
到目前为止,我已经能够通过将
类
和id
从select转移到span来转移应用的样式,但我的挑战是将样式直接应用到select
标记上(即,在样式/样式表中,它的内容是:select{blah:bloh;}
)尝试以下方法:
function ApplyStyles(select, span) {
var select = document.querySelector(select);
var span = document.querySelector(span);
var sheets = document.styleSheets;
for(var i = 0; i < sheets.length; i++) {
var rules = sheets[i].cssRules || sheets[i].rules;
for(var r = 0; r < rules.length; r++) {
var rule = rules[r];
var selectorText = rule.selectorText;
if(document.querySelector(selectorText) == select){
for(var l = 0; l < rule.style.length; l++){
span.style[rule.style[l]] = rule.style[rule.style[l]];
}
}
}
}
}
ApplyStyles("#selection", "#span");
下面是一个JSFIDLE示例:
其工作原理是查找应用于
select
元素的所有外部样式,并将其应用于span
元素。如何应用用户定义的样式?使用类?如果是,则应用相同的类是否需要旧的浏览器支持?是否只需要“样式”属性中的样式?如果可能,需要广泛的浏览器支持