javascript - 作成されたdivでWebページのCSSクラスを再利用する方法は?

Question

Web ページの CSS スタイルの特定のクラスを、追加した新しい Div 要素に再利用したいと考えています。ページの再設計に Greasemonkey を使用しています。

bar1にスタイルを追加するにはどうすればよいmyDivですか?

元の分割:

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

新しい部門:

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

Answer 1

myDiv.className = 'bar1';

or

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

Answer 2

Sounds like your end goal is really to make something like a bookmarklet. If you are just looking to add a class you can always just set the "className" on a object since the word 'class' is protected.

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

I also threw in something style sheet dynamically (but only for more modern browsers, older browsers require a bunch more work).

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]];
}