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

-1

我想重新使用网页的某种CSS样式到我已添加的新Div元素。我正在使用Greasemonkey重新设计页面。如何在创建的div中重用网页的CSS类？

如何将bar1样式添加到myDiv？

原始格：

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

新的div：

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

来源

2012-07-12 kitokid

的可能重复[使用Javascript - 如何DIV类添加到的createElement（http://stackoverflow.com/问题/ 1115310/javascript-how-to-add-div-class-to-createelement） – 2012-07-12 03:17:40

myDiv.className = 'bar1';

或

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

来源

2012-07-12 03:15:02

我可以看到myDiv类的名字是'bar1'，当我使用萤火虫进行检查时，仍然没有将该样式应用于myDiv。任何想法？ – kitokid 2012-07-12 03:28:15

然后其他一些CSS优先。链接到有问题的页面或发布可在http://pastebin.com/或http://jsfiddle.net/上演示此问题的简化页面。 – 2012-07-12 03:34:14

Soun像你的最终目标一样，真正做出像书签一样的东西。如果你只是想添加一个类，你总是可以在一个对象上设置“className”，因为'class'这个词是受保护的。

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

我也扔在一些样式表动态（但仅限于更现代的浏览器，旧的浏览器需要一堆更多的工作）。

来源

2012-07-12 03:18:22 SciSpear

这是一个Greasemonkey问题，所以技术上唯一重要的浏览器是Firefox - 除非另有说明。（在这种情况下，它更适合作为“userscripts”问题。） – 2012-07-12 03:22:32

Bookmarklet仅仅是推测（你也可以获得用于chrome的greasemonkey）。我的jsfiddle只显示了如何添加和没有jQuery的类，它是浏览器不可知论者... – SciSpear 2012-07-28 01:29:16

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

而应该遍历所有相关的场所，复制他们的计算值，像这样：

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

来源

2012-07-12 04:10:06 user123444555621

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

回答

相关问题