如何在創建的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類？

回答

相關問題