有人问了一个问题here关于如何将 css 样式从一个对象复制到另一个对象。普遍接受的答案是:
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 标签的目的。
有没有办法只复制用户提供的样式,而不是复制用于设置元素样式的整个样式表?
到目前为止,我已经能够通过将 class
和 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");
例如,这是一个 JSFiddle:https://jsfiddle.net/rsLnaw56/2/
它的工作原理是找到所有应用于 select
元素的外部样式并将其应用于 span
元素。
关于javascript - 如何将所有用户提供的样式从一个对象复制到另一个对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41439920/