別ページからOnclickで背景色変更

2023/10/18 00:34

このQ&Aのポイント

別ページからOnclickイベントを利用して、任意のセルの背景色を変更する方法について質問があります。
過去の質問で、同一ページ内でのonclickによるセルの背景色変更方法を見ましたが、今回は別のページからonclickを使用して特定のセルの背景色を変更することができるかどうかを知りたいです。
例えば、a.htmlのソースコードに<a href="b.html#b1" onClick="ChgBg('td1','black')">b1へリンク</a>というリンクがあります。b.htmlの#b1にリンクすると、idがtd1のセルの背景色が変更されますが、別のページから同様の動作を実現することは可能でしょうか。

ベストアンサー

別ページからOnclickで背景色変更

2010/02/27 14:24

いつもお世話になっております。以下の過去質問で、同一ページ内によるonclickによるセルの背景色変更を拝見しましたが、同一ページではなく、別ページからonclickによって、該当のページの任意のセル背景色変更は可能でしょうか。 http://oshiete1.goo.ne.jp/qa696811.html （例） a.htmlソース <a href="b.html#b1" onClick="ChgBg('td1','black')">b1へリンク</a> b.htmlの#b1へリンクすると、 idがtd1のセル背景色が変更される。。。宜しくお願い申し上げます。

tps0401
お礼率37% (3/8)

JavaScript
回答数1
ありがとう数1

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

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

ベストアンサー

babu_baboo
ベストアンサー率51% (268/525)

2010/02/27 14:57 回答No.1

var TB = { b1:['td1','background-color:red'], b2:['td2','background-color:blue'] }; /*@cc_on @if(1)attachEvent('on'+@else@*/addEventListener(/*@end@*/'load',function(){ var e,o=TB[location.hash.substring(1)];if(o&&(e=document.getElementById(o[0]))) e.style.cssText=o[1];},false);

質問者

お礼 2010/03/01 15:24

babu_baboo様先日は大変お世話になりました。今回も助けていただき本当にありがとうございました。検証した結果、うまく実現できました。ありがとうございました。

関連するQ&A

表の一部のセルの背景色を変更したい
いつもお世話になっております。 IE6.0上で動作するものとして質問させていただきます。以下のソースの中でBODYタグのonloadイベントで initメソッドを呼びだし、メソッド中で表中の任意のセルの背景色を変更するにはどのようにすればよいのでしょうか。 --------------------------------------- <HTML> <HEAD> <script language="JavaScript">  </script> </HEAD> <BODY onload="init(); "> <FORM name="tttt"> <TABLE border="1" > 　<TBODY> 　　<TR> 　　　<TD onClick="this.style.backgroundColor = 'black';">test</TD> 　　　<TD onClick="this.style.backgroundColor = 'red';">test</TD> 　　　<TD onClick="this.style.backgroundColor = 'yellow';">test</TD> 　　</TR> 　</TBODY> </TABLE> </FORM> </BODY> </HTML> --------------------------------------- ソースは簡略化しておりますので、内容に不備がございましたら、ご容赦ください。ご回答をよろしくお願いいたします。
- ベストアンサー
- HTML
onclickで表示/非表示させている動きに、別ページからリンクさせるには
JavaScript初心者です。 A.htmlを作成し、リンクをクリックするとidとnumberを呼び出すことで、同じhtml内に存在する3つのページが1つだけ表示されるように、cssとJavaScriptで表示/非表示させています。【JavaScript】 function Page(id, nu){ Num = new Array ('01', '02', '03'); for (i=0; i<3; i++) { if(Num[i] == num){ document.getElementById(id + Num[i]).style.display = "block"; } else { document.getElementById(id + Num[i]).style.display = "none"; } }; } 【CSS】 #test01 {display:block;} #test02 {display:none;} #test03 {display:none;} 【html】 <a href="javascript:void(0);" onclick="Page('test','01')">link1</a> <a href="javascript:void(0);" onclick="Page('test','02')">link2</a> <a href="javascript:void(0);" onclick="Page('test','03')">link3</a> <div id="test01"> 　・・・ </div> <div id="test02"> 　・・・ </div> <div id="test03"> 　・・・ </div> このとき別のhtml(B.html)から、A.htmlのid="test02"が表示された状態にリンクを作成することはできるのでしょうか？恐れ入りますがよろしくお願い致します。
- ベストアンサー
- JavaScript
hrefとonclickでのリンクの移動について
現在以下の用になっています。 <a href="sample1.html" onclick="other(sample2.html)">sample.html</a> href= でsample1.htmlと指示しているのにかかわらず、onclick=other(リンク先)と記述しているのですが、どのようにすればonclick=だけを実行し、href=の方を無効にすればよいのでしょうか？ちなみに、onclickのリンクの移動先は同じウェブページ内に設置されたiframeへの移動になっています。
- ベストアンサー
- JavaScript
マウスオーバーでページ背景を変更
似たような質問が無いか探したのですが、見つからずもし同様のものがありましたら申し訳ございません。テキストリンクに対し、マウスオーバーで背景に画像を表示させたいです。例）<a href="img.html">こんにちわ</a>⇒"こんにちわ"をマウスオーバーで背景に「img.jpg」というファイルをページ背景に表示させる。よろしくお願いします。
- 締切済み
- HTML
クリックするとテーブルの列の背景色が変わる／元に戻る
このサイトを参考に以下のサンプルを作りました。「あるセルをクリックすると、そのセルと依存関係のあるセルすべての背景色を変更する。」この例でいくと、 1.セルA1,A2のどれをクリックしても、列Aすべての色が変わる。 2.セルB1,B2のいずれかをクリックすると、列Aは元の色に戻り、列Bすべての色が変わるという動きを実現したいです。 2.機能を実現するにはどのようにすればよいのか、どなたかご存知の方ご教授のほどよろしくお願いいたします。現時点のサンプル <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>テーブルの列の背景色を変える</title> <SCRIPT language="JavaScript">  </SCRIPT> </head> <body> <TABLE border="1"> <TR> <TD width="30"> </TD> <TD width="30">列A</TD> <TD width="30">列B</TD> <TD width="30">列C</TD> </TR> </TABLE> <TABLE border="1"> <TR> <TD width="30">行1</TD> <TD width="30" id="td1" onclick="bgcolor('td1')">A1</TD> <TD width="30" id="td2" onclick="bgcolor('td2')">B1</TD> <TD width="30" id="td3" onclick="bgcolor('td3')">C1</TD> </TR> </TABLE> <TABLE border="1"> <TR> <TD width="30">行2</TD> <TD width="30" id="td1" onclick="bgcolor('td1')">A2</TD> <TD width="30" id="td2" onclick="bgcolor('td2')">B2</TD> <TD width="30" id="td3" onclick="bgcolor('td3')">C2</TD> </TR> </TABLE> </body> </html>
- ベストアンサー
- JavaScript
インラインフレームから別フレームの背景画像変更
○ページの構造親ページ ├フレームA └フレームB - インラインフレームC ○インラインフレームC内ページ <script type="text/javascript">  </script> <span onclick='bgchange("img.gif");return false'>背景画像変更！</span> ＊インラインフレーム内の「背景画像変更！」クリックでAフレームの背景画像が変わるようにしたいのですが、上のスクリプトだとAB間、B→C、でしか機能しません。どなたか手直しをして頂けないでしょうか？
- ベストアンサー
- JavaScript
iframe内のページ(複数)を変更
ページに複数のボタン(リンク)があり、それをクリックすることで同一ページ内のiframeの内容を変更させたいです。色々なところを探した結果、 function Change() {document.ifSample.location.href="xxx.html";} と <FORM><INPUT type="button" value="変更！1" onclick="Change()"></FORM> の組み合わせで、単一ページの変更が出来るというのは判りました。これを複数ページ用に改造するにはどのようにしたら良いでしょうか? 方法がありましたら教えてください。
- 締切済み
- JavaScript
HTML table内文字のonclick抑止
HTMLの書き方について質問です。 tableのtdにonclick処理を設定し、さらに、そのtd内の文字列にもonclick処理を設定したいのですが、文字列をクリックしたときに、同時にtdに設定したonclick処理も実行されてしまいます。文字列をクリックしたときは、その文字列に設定してある処理だけ実行するようにはできないのでしょうか？具体的なサンプルは下記の通りで、 text_funcだけを実行させたいのです。 ---------------------- <html> <head> <script language="JavaScript" type="text/javascript">  </script> </head> <body> <table border="1"> <tr> <td style="padding:10px;" onclick="td_func()"> <a href="#" onClick="text_func();return false;">test_td</a> </td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
セルの背景画像の変更
リンクに触ると背景画像をp15.jpgに変更したいのですがよろしくお願いします。 <table> <tr><td>123</td> <td background="p10.jpg"><a hrf="abc.html">abc</A></td> <td>456</td> </tr></table>
- ベストアンサー
- JavaScript
ページ内リンクに他のページからリンクする方法
ページ内リンクに他のページからリンクする方法ってありますか？初歩的な質問ですいません。タイトルでは分かり辛いので、例を書きます。ページ１にＡ・Ｂ・Ｃ・Ｄ・Ｅと見出しの付いた文章があります。左側に対応したリストを作って、ページ内でリンクを貼っています。ページ２に、ページ１で作った見出しＣに関連する記述があり、そこにリンクを作成して、ページ１の見出しＣを表示したいのです。ページ２から、ページ１の中にあるページ内リンクを指定する事は出来ますでしょうか？ ※見出しＣだけ抽出されると言う意味では無く、ページ１で見出しＣのリンクを押した時と、同じ表示でかまいません。ページ１の左側リスト <tr> <td><A Href="#page_linkＡ">りんご</A></td> <td><A Href="#page_linkＢ">みかん</A></td> <td><A Href="#page_linkＣ">スイカ</A></td> <td><A Href="#page_linkＤ">柿</A></td> <td><A Href="#page_linkＥ">メロン</A></td> </tr> ページ１の本文 <A Name="page_linkＡ"><p>りんごは大好きです</p> <A Name="page_linkＢ"><p>みかんはあまり好きではありません</p> <A Name="page_linkＣ"><p>スイカは塩を振ってたべます</p> <A Name="page_linkＤ"><p>柿より牡蠣が食べたい</p> <A Name="page_linkＥ"><p>メロン…高くて食べれません</p> ページ２から<A Name="page_linkＣ"><p>スイカは塩を振ってたべます</p>を表示するリンクを貼りたいのです。この説明で解ってもらえますでしょうか？宜しくお願いします。
- ベストアンサー
- ホームページ作成ソフト