javascript - 如何在创建的 div 中重用网页的 CSS 类？

Question

我想将网页的某类 CSS 样式重用于我添加的新 Div 元素。我正在使用 Greasemonkey 重新设计页面。

如何添加bar1样式myDiv？

原始分区：

<div id="bar1" class="bar1">

新部门：

var myDiv = document.createElement('div');

Answer 1

myDiv.className = 'bar1';

或者

myDiv.className = document.getElementById ('bar1').className;

Answer 2

听起来您的最终目标实际上是制作书签之类的东西。如果你只是想添加一个类，你总是可以在一个对象上设置“className”，因为“class”这个词是受保护的。

http://jsfiddle.net/scispear/tCzZM/

我还动态地添加了一些样式表（但仅适用于更现代的浏览器，旧浏览器需要更多的工作）。

Answer 3

由于 CSS 继承，复制类名是不够的，除非新元素是另一个元素的兄弟。即便如此，CSS3 选择器之类的nth-child可能也会把事情搞砸。

相反，您应该迭代所有相关的样式属性并复制它们的计算值，如下所示：

var stylesToCopy = ['color', 'background-color', ...];
var oldStyle = getComputedStyle(bar1);
for (var i = 0; i < stylesToCopy.length; i++) {
    myDiv.style[stylesToCopy[i]] = oldStyle[stylesToCopy[i]];
}