ベストアンサー

スタイルシートの背景色の取得

2008/09/14 17:26

あるセルから他のセルへスタイルシートの背景色をコピーしたいのですが、下記のように実行すると無色となってしまいます。どなたかご教授いただけませんでしょうか。因みにコピーにしなければならないのは、元のセルの色も動的に変わるという理由です。 <head> <style> td.a{ background:blue; width:25; height:15; } td.b{ background:green; width:25; height:15; } </style> <script type="text/javascript"> function s(b){ document.getElementById('ia').style.background=b.style.background; //document.getElementById('ia').style.background="red"; } </script> </head> <body> <table Cellspacing="1"> <td id="ia" class="a"></td> </table> <table Cellspacing="1"> <tr> <td id="ib" class="b" onmousedown="s(this)"></td> </tr> </table> </body>

mackie01
お礼率72% (68/94)

JavaScript
回答数2
ありがとう数4

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

noname#84373

2008/09/14 19:28 回答No.2

document.getElementById('ia').style.backgroundColor=(b.currentStyle || document.defaultView.getComputedStyle(b, '')).backgroundColor;

質問者

お礼 2008/09/15 11:21

あれこれ試して悩んでいたところでしたので、コードを試したとき感動しました。これはもはや基本手法になるのでしょうか。勉強不足のようでした。考えている動的なこともできそうです。有難うございました。

ログインすると、全ての回答が全文表示されます。

その他の回答 (1)

himajin100000
ベストアンサー率54% (1660/3060)

2008/09/14 19:20 回答No.1

いくつか説明が必要だな。まず，styleプロパティとは何かを確認してみましょう http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-htmlelementcss 関心カテゴリに英語があるから適当にしか訳しませんが >This represents the contents of the STYLE attribute for HTML elements or elements in other schemas or DTDs which use the STYLE attribute in the same way Interface ElementCSSInlineStyleは，HTMLの各要素のstyle属性あるいはDTDや他のスキーマに含まれる要素でstyle属性を同様の方法で用いるstyle属性の内容をあらわす。ので，style要素やlink要素による外部スタイルシートの宣言は含まれず，質問文の状況は仕様どおりです。じゃあ，その二つはどこに含まれるのかと言うとこっち。 http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleSheet で，これは http://developer.mozilla.org/En/DOM/Document.styleSheets こういう形で取得できる。ところで，指定された要素に対して現在適用されているスタイルを得るには http://developer.mozilla.org/en/DOM/window.getComputedStyle んでもって6.4全部。 http://www.w3.org/TR/CSS21/cascade.html#cascading-order その他直接関係無いもの 1. なお，text/htmlではなくapplication/xhtml+xmlとして配布すればCDATAマーク区間前後のコメントにする必要はない 2. <length>は単位がないと駄目。 http://www.w3.org/TR/CSS21/visudet.html#propdef-width http://www.w3.org/TR/CSS21/visudet.html#propdef-height http://www.w3.org/TR/CSS21/syndata.html#value-def-length あらかた読んでもらった所で，ソースコードを示す。消さずに，適用される一番最後に足してしまえ、ということ。 style属性も優先されるからそっちでもいいんだけど，個人的に落ち着かないので。とりあえず現在のコードでは， insertRuleの第二引数を"!important"にしてないので style要素や外部スタイルシートに!importantが指定されているものに関してはそっちが優先されるようにしてある。 #gooはURIっぽい文字列の前後にZERO WIDTH SPACEを埋め込むので取り除いてから使ってくださいね <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Q4328359 TestCase 1</title> <style type="text/css">/* <![CDATA[ */ .a{ background:blue; width:25px; height:15px; } .b{ background:green; width:25px; height:15px; } /* ]]> */</style> <script type="text/javascript">//<![CDATA[ function CopyBackgroundStyle(b){ var sb = window.getComputedStyle(b,null).getPropertyValue("background"); var stylesheet = document.styleSheets[document.styleSheets.length-1]; stylesheet.insertRule("#ia{background:" + sb + "}",stylesheet.cssRules.length); } //]]></script> </head> <body> <p id="ia" class="a">あ</p> <p id="ib" class="b" onclick="CopyBackgroundStyle(this)">い</p> </body> </html> ただし，手元では Opera 9.60 Build 10427 で動作するが， Minefield/3.1b1pre(Gecko) Safari 4 Developer Preview では動作しなかった。バグで。 https://bugzilla.mozilla.org/show_bug.cgi?id=137688 https://bugzilla.mozilla.org/show_bug.cgi?id=137686 https://bugs.webkit.org/show_bug.cgi?id=13658 なので一応getPropertyValueメソッドの引数が"background-color"なら動作する。 IEは意図的に無視させていただいた。メソッド名が標準と異なることが多すぎるから。調べれば出てくるだろうけど。