あるセルから他のセルへスタイルシートの背景色をコピーしたいのですが、下記のように実行すると無色となってしまいます。
どなたかご教授いただけませんでしょうか。
因みにコピーにしなければならないのは、元のセルの色も動的に変わるという理由です。
<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>
投稿日時 - 2008-09-14 17:26:38
document.getElementById('ia').style.backgroundColor=(b.currentStyle || document.defaultView.getComputedStyle(b, '')).backgroundColor;
投稿日時 - 2008-09-14 19:28:23
お礼
あれこれ試して悩んでいたところでしたので、コードを試したとき感動しました。これはもはや基本手法になるのでしょうか。
勉強不足のようでした。考えている動的なこともできそうです。
有難うございました。
投稿日時 - 2008-09-15 11:21:58
2人が「このQ&Aが役に立った」と投票しています
ベストアンサー以外の回答（1件中 1～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は意図的に無視させていただいた。メソッド名が標準と異なることが多すぎるから。
調べれば出てくるだろうけど。
投稿日時 - 2008-09-14 19:20:22
お礼
丁寧に一からお教え頂き誠に有難うございます。
規格のことなど素人で、感覚でやっていっているところがあります。
もう少し勉強したいと思います。
No2の方にご回答いただいていますが、IEではcurrentStyleを使うようですね。
投稿日時 - 2008-09-15 11:12:37
