- ベストアンサー
スタイルシートの背景色の取得
あるセルから他のセルへスタイルシートの背景色をコピーしたいのですが、下記のように実行すると無色となってしまいます。 どなたかご教授いただけませんでしょうか。 因みにコピーにしなければならないのは、元のセルの色も動的に変わるという理由です。 <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）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
document.getElementById('ia').style.backgroundColor=(b.currentStyle || document.defaultView.getComputedStyle(b, '')).backgroundColor;
その他の回答 (1)
- himajin100000
- ベストアンサー率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は意図的に無視させていただいた。メソッド名が標準と異なることが多すぎるから。 調べれば出てくるだろうけど。
お礼
丁寧に一からお教え頂き誠に有難うございます。 規格のことなど素人で、感覚でやっていっているところがあります。 もう少し勉強したいと思います。 No2の方にご回答いただいていますが、IEではcurrentStyleを使うようですね。
関連するQ&A
- スタイルシートでのデザイン
HTMLを組む際、今までレイアウトはtableタグで組んでいたのですが、CSSで組もうと思っています。 例えば、 <table align="center"> <tr> <td colspan="2" width="500" height="80">aaa</td> <td rowspan="2" width="300" height="200">bbb</td> </tr> <tr> <td colspan="2" width="500" height="20">ccc</td> </tr> <tr> <td width="200" height="100">ddd</td> <td width="300" height="100">eee</td> </tr> </table> をスタイルシートで配置しようと思い、 <div align="center" style="width:800px"> <div style="float:left;width:500px;height:80px;background-color:#ff9999">aaa</div> <div style="float:right;width:300px;height:200px;background-color:#9ff999">bbb</div> <div style="float:left;width:500px;height:20px;background-color:#9999ff">ccc</div> <div style="float:left;width:200px;height:100px;background-color:#99ffff">ddd</div> <div style="float:center;width:300px;height:100px;background-color:#ffff99">eee</div> </div> としたのですが、センタリングされないのと、eeeの箇所がdddの隣に来ないで次の行に移ります。 うまく出来ないので、どなたか教えて下さい。お願いします。
- ベストアンサー
- CSS
- スタイルシート
<!-- span#k-11 { background-image : url("a.gif")} span#k-12 { background-image : url("b.gif")} span#k-21 { background-image : url("c.gif")} span#k-22 { background-image : url("d.gif")} --> <body> <table> <tr> <td><a href=""><span id="k-11" style="width:192; height:33;"></span></a></td> <td><a href=""><span id="k-12" style="width:192; height:33;"></span></a></td> </tr> <tr> <td><a href=""><span id="k-21" style="width:192; height:33;"></span></a></td> <td><a href=""><span id="k-22" style="width:192; height:33;"></span></a></td> </tr> </table> </body> 外部スタイルシートで、 同じ大きさ（width:192; height:33; gif画像の大きさ）のgif画像を、縦２×横２のテーブルを表示して、その個々の画像にリンクを貼りたいと思っています。 一応これできますが、もう少しbody内のテーブルを簡略したいと思いますが、なかなかうまいきません。 １．大きさの部分（width:192; height:33;）をスタイルに入れると、何故か画像が表示されなくなります。 ２．リンクの部分もスタイルに入れたいのですが、どのようにすればよいかわかりません。 どうぞご指導よろしくお願いします。
- 締切済み
- その他（プログラミング・開発）
- 入れ子にしたテーブルをheight100%にする
お世話になります。 以下のソースで、table2の高さを100％にしたいです。 この書き方では、firefoxではうまく表示できるのですが、 IEではだめでした。どこがいけないのでしょうか？？ ---------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css"> <!-- html {height:100%;} body {height:100%;} .th100 {height:100%;} --> </style> </head> <body> <table width="600" border="1" cellpadding="0" cellspacing="0" class="th100"> <tr> <td width="300" rowspan="2"> 長いテキスト </td> <td height="50"><table width="300" height="50" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000"> <tr> <td>table1</td> </tr> </table></td> </tr> <tr> <td><table width="300" border="0" cellpadding="0" cellspacing="0" bgcolor="#999999" class="th100"> <tr> <td>table2</td> </tr> </table></td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- スタイルシートについて
<HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <TABLE border="1"> <TBODY> <TR> <TD><IMG src="i1.gif" width="64" height="64" border="0"></TD> <TD><IMG src="i2.gif" width="64" height="64" border="0"></TD> </TR> <TR> <TD><IMG src="m1.gif" width="32" height="32" border="0"></TD> <TD><IMG src="m2.gif" width="32" height="32" border="0"></TD> </TR> </TBODY> </TABLE> </BODY> </HTML> こういったTableを使った表がある場合、スタイルシートで示すことは出来ますか？もし出来るならそのソースを教えてください。 また、こういったTableのホームページを一括でスタイルシートに変換できるソフトが存在していたら教えてください。 それと、この行数がかなり大きくなると、Tableよりも軽く表示がされると聞いたのですが本当でしょうか？ ご返答、何卒、よろしくお願い致します。
- ベストアンサー
- HTML
- 表の作成をスタイルシートで
皆さんはHTMLで表を作成する際、どのように作成していますか？ 私はTableタグとスタイルシートを使っているのですが、これをスタイルシートのみで 作成できないでしょうか。 例えば以下のような表で、■部分は他のセルと背景色を変えます。 ■□□ ■□□ ■□□ 通常私がやっている方法は、tableタグに下記スタイル「tb01」を、タイトル部分には 「td.title」を設定を設定しています。 -----------------HTML-------------------------- <table width="100%" border="0" cellspacing="1" cellpadding="0"> <tr> <td class="title">6月7日</td> <td>text</td> <td>text</td> <td>text</td> </tr> <tr> <td class="title">6月8日</td> <td>text</td> <td>text</td> <td>text</td> </tr> </table> ---------------------------------------------------------- -----------------スタイルシート-------------------------- .tb01 {FONT-SIZE: 12px; border-collapse : collapse ; border-width : 1px 0 0 1px ; border-style : solid ; border-color : #CDCDCD ; ; width:350px; background-color:#FFFFFF; } table.tb01 td {border-width : 0 1px 1px 0 ; border-style : solid ; padding : 7px ; line-height:120%; border-color : #CDCDCD ; } td.title {background-color:#ECECEC; } ---------------------------------------------------------- スタイルシートのみでは無理でも、もっと良い方法があれば 是非教えてください。
- ベストアンサー
- HTML
- スタイルシートのテーブル枠について
今までテーブルを利用してホームページに簡単な線を つけていました。これをスタイルシートで行うと 微妙にうまくできません・・・お助けください。 すべてＩＥで検査しております。 html従来の私の線の引き方 <table width="600" border="0" cellspacing="0" cellpadding="0"> <tr> <td bgcolor="#000000"> <img src="sps.gif" width="600" height="1"> </td> </tr> </table> 上記の表現をスタイルシートを利用してやりたいのですが 線が１pxのはずが、大きくなってしまいます。 cssを利用した記述 css部分 .index_table{ width: 600px; border:0px; border-width: 0px; margin: 0px; padding: 0px; } html部分 <table class="index_table"> <tr> <td bgcolor="#000000"> <img src="ims/sps.gif" width="600" height="1"> </td> </tr> </table> これに似たいい方法は、ないでしょうか？ 質問が、うまくまとまってなくてすみません・・・
- ベストアンサー
- HTML
- 文字を右寄りにしつつ、背景を赤にするには
css初心者です。 一番左のセルのみ、文字を右寄りにしつつ、背景を赤にしたいのですが、 全ての背景に色がついてしまいます。 １と１００のセルのみ、文字を右寄りにしつつ、背景を赤にするにはどうすればいいですか？ <html> <head> <title>test</title> <style type="text/css"> td.table_moji_right { text-align: right; } td { background-color: red; } </style> </head> <body> <table border=1 cellspacing=1> <tr><td class="table_moji_right">1</td><td>aaa</td></tr> <tr><td class="table_moji_right">100</td><td>iii</td></tr> </table> </body> </html>
- ベストアンサー
- HTML
- スタイルシートの書き方
HPの中に以下のようなテーブルを並べて作っているのですが、後からまとめて編集しやすいようにCSSファイルを別に作ろうと思います。 自分であれこれ試してはいるのですが、スマートな（？）スタイルシートの書き方がいまいちわかりません。 どのように指定すればいいでしょうか？ 因みに下のタグもかなり自己流な部分があるのではないかと思うので、おかしいところがあれば指摘してください。 よろしくお願いします。 ------------------------------------------------------ <table border="0" bgcolor="#000000" cellspacing="0" cellpadding="0"> <tr> <td> <table border="0" cellspacing="1" cellpadding="2" width="500"> <tr><td bgcolor="#ffffff" width="150">AAA</td><td>BBB</td></tr> </table> </td> </tr> </table>
- ベストアンサー
- CSS
- HTMLをスタイルシートなどの手法で簡略化したい。
次のHTMLでは、二つ目のフレームが１０００行を超え、ページがかなり重くなります。それでスタイルシートとかいわれる手法で軽くしたいのですが、この手法は全く素人です。下の事例で、理想的なHTMLに短縮できるのでしたら、教えてください。 一つ目のフレームは１行、二つ目のフレームは１０００行を超えます。よろしくお願いします。 ---------------------------------- <html> <head> <title>TEST</title> </head> <body> <center> <table> ・ ・ ・ ・ </table> <table cellspacing=2 width=1000 bgcolor=#cccccc> <tr align=middle bgcolor=#FFFFCC><td width=200 height=40><b>項目１</td><td width=200><b>項目２</td><td width=200><b>項目３</b></td><td width=400 align=left><b>項目４</b></td></tr> <tr align=middle bgcolor=#ffffff><td height=40><b>１行目内容１</b></td><td><b>１行目内容２</b></td><td><b>１行目内容３</b></td><td align=left><b>１行目内容４ </b></td></tr> <tr align=middle bgcolor=#ffffff><td height=40><b>２行目内容１</b></td><td><b>２行目内容２</b></td><td><b>２行目内容３</b></td><td align=left><b>２行目内容４ </b></td></tr> ・ ・ ・ ・ ・ <tr align=middle bgcolor=#ffffff><td height=40><b>１０００行目内容１</b></td><td><b>１０００行目内容２</b></td><td><b>１０００行目内容３</b></td><td align=left><b>１０００ 行目内容４</b></td></tr> </table> </body> </html>
- ベストアンサー
- HTML
- operaだとテーブルがなくなります
operaだテーブルがなくなります IEだと問題なく表示されるのに だれか助けてください style.css body{background-color:#ffff99;margin:0px; font-size:large; font-family:"HG正楷書体-PRO","HG行書体","HGP行書体",cursive} .cur{font-family:cursive} .ser{font-family:serif} } table{background-color:#ff9933; width:100%; height:10% } .midori{background-color:#999933; width:100%; height:3.3% } ｈｔｍｌのほうは <HTML> <HEAD> <TITLE></TITLE> <link href="style.css" rel="stylesheet" type="text/css"> </HEAD> <BODY> <table><tr ><td></td></tr></table> <table class="midori"> <tr ><td></td></tr></table> <table style="height:6.7%"> <tr ><td></td></tr></table> <table style="position:absolute; left: 0px; bottom:8%; width:8%; height:100%; background-color:#993300"> <tr ><td></td></tr></table> <table style="position:absolute; bottom:0; height=8% " class="midori"> <tr ><td></td></tr></table> </BODY> </HTML> こんな感じなのですが どうしてでしょうか
- ベストアンサー
- HTML
お礼
あれこれ試して悩んでいたところでしたので、コードを試したとき感動しました。これはもはや基本手法になるのでしょうか。 勉強不足のようでした。考えている動的なこともできそうです。 有難うございました。