解決済み

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

  • 困ってます
  • 質問No.4328359
  • 閲覧数664
  • ありがとう数4
  • 気になる数0
  • 回答数2
  • コメント数0

お礼率 72% (68/94)

あるセルから他のセルへスタイルシートの背景色をコピーしたいのですが、下記のように実行すると無色となってしまいます。
どなたかご教授いただけませんでしょうか。
因みにコピーにしなければならないのは、元のセルの色も動的に変わるという理由です。

<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>

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

  • 回答No.2

document.getElementById('ia').style.backgroundColor=(b.currentStyle || document.defaultView.getComputedStyle(b, '')).backgroundColor;
お礼コメント
mackie01

お礼率 72% (68/94)

あれこれ試して悩んでいたところでしたので、コードを試したとき感動しました。これはもはや基本手法になるのでしょうか。
勉強不足のようでした。考えている動的なこともできそうです。
有難うございました。
投稿日時 - 2008-09-15 11:21:58
Be MORE 7・12 OK-チップでイイコトはじまる

その他の回答 (全1件)

  • 回答No.1

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

いくつか説明が必要だな。

まず,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は意図的に無視させていただいた。メソッド名が標準と異なることが多すぎるから。
調べれば出てくるだろうけど。
お礼コメント
mackie01

お礼率 72% (68/94)

丁寧に一からお教え頂き誠に有難うございます。
規格のことなど素人で、感覚でやっていっているところがあります。
もう少し勉強したいと思います。
No2の方にご回答いただいていますが、IEではcurrentStyleを使うようですね。
投稿日時 - 2008-09-15 11:12:37
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,500万件のQ&Aを分析して最適な回答をご提案します。

関連するQ&A
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する

特集


より良い社会へ。感謝経済プロジェクト始動

ピックアップ

ページ先頭へ