ベストアンサー

Tableの枠線（内・外）色を変更

2008/02/26 15:51

Tableの枠線（内・外）色を変更する場合、 CSSだと、 .Table { border-color:#FFFFFF; } .Table TD{ border-color:#FFFFFF;} .Table TR{ border-color:#FFFFFF;} で変更できますが、これをJacasvriptで対応するにはどのようにしたらいいのでしょうか？ FireFoxもIEも対応したいと思っています。 BorderColor="#FFFFFF"だけだと、 FireFoxで枠線の外側しか変更できません。たぶんCSSと組み合わせる必要があると思います。よろしくお願いします。

ENTRE
お礼率0% (17/2526)

JavaScript
回答数3
ありがとう数0

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

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

ベストアンサー

leap_day
ベストアンサー率60% (338/561)

2008/02/27 06:33 回答No.3

こんにちはこんな感じ？ <script type="text/javascript"></script> <style type="text/css"> #Table { border:1px solid; } td { border:1px solid; } </style> <table id="Table"> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table> <input type="button" value="blue" onclick="ch('blue')"> <input type="button" value="red" onclick="ch('red')"> <input type="button" value="lawngreen" onclick="ch('#7CFC00')"> <input type="button" value="yellow" onclick="ch('#FFFF00')">

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

その他の回答 (2)

SAYKA
ベストアンサー率34% (944/2776)

2008/02/26 17:54 回答No.2

http://www.tohoho-web.com/js/dom.htm#getElementsByTagName ↑で操作タグを特定して http://www.tohoho-web.com/js/style.htm ↑で操作が妥当じゃないかな。そうじゃなくて全体のをjavascriptで変更する方法？

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

GreenCup
ベストアンサー率53% (7/13)

2008/02/26 17:53 回答No.1

ご要望に沿っているかどうか解りませんが、下記のHTMLは、ボタンをクリックして特定のTableの線色を変更できます。（IE6 SP1とFireFox2.0.0.12で動作確認済）ポイントは　・TableにIDをつける　・TableとTD用のスタイルを、各２種類用意　・javascriptで、TableとTDのスタイル名を変更しているという3点です。 <html> <head> <style type="text/css"> table.table_red { border-style: solid; border-width: 1px; border-color: #ff0000; } table.table_blue { border-style: solid; border-width: 1px; border-color: #0000ff; } td.td_red { border-style: solid; border-width: 1px; border-color: #ff0000; } td.td_blue{ border-style: solid; border-width: 1px; border-color: #0000ff; } </style> <script type="text/javascript">  </script> </head> <body> <table id="tb1" class="table_red"> <tr> <td class="td_red">AAAAAAA</td> <td class="td_red">BBBBBBB</td> </tr> </table> <input type="button" name="btn1" value="色変更" onClick="change_color();"> </body> </html> ちなみにIEの場合、Javascriptのループは for ( i = 0; i < document.all.tb1.cells.length; i++ ) { document.all.tb1.cells[i].className = "td_blue"; } これだけでもOKですが、FireFoxはNGす。

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