• ベストアンサー

初心者で申し訳ないのですが・・・お願いします。

現在、javascriptの勉強中なのですが、どうしてもわからなくなってしまい今回投稿させてもらいました・・・ 今回の質問の内容なのですが、 div要素のスタイルシートのクラス名の切り替えをjavascriptで行おうとおもっていたのですが、全然反応してくれないんです・・ ちなみにHTMLは以下の通りです。 ---------html------------------ <script type="text/javascript" src="test.js"></script> <body> <div class="hare"></div> <div class="hare"></div> <div class="hare"></div> <div class="hare"></div> </body> --------------------------- cssは ---------css------------------ css .hare{ display:block; background:url(toumei.gif) no-repeat; width:300px; height:100px;} .ame{ display:block; background:url(toumei2.gif) no-repeat; width:300px; height:100px;} です。 --------------------------- スクリプトは以下のとおりです。 ---------javascript(test.js)------------------ window.onload = function(){ var hai = document.getElementsByTagName("div"); for (var i=0; i<hai.length-1; i++){ hai.item(i).onmouseover = function(){ hai.item(i).className="ame"; } hai.item(i).onmouseout = function(){ hai.item(i).className="hare"; } } } --------------------------- 選択したdiv要素にmouseoverしたらクラス名を変えて、 mouseoutしたらクラス名をもどす・・と、いたって単純なプログラムではあるんですが・・動いてくれません・・ （単純なプログラムも組めてないようじゃダメですよね・・） う～～ん・・なぜでしょう・・ ご教授お願いいたします・・・

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

  • ベストアンサー
  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.2

単純な話、オブジェクト参照のやり方がおかしいです。 onmouseover(もしくはonmouseout)イベントを設定するにあたり function内で自オブジェクトにアクセスするにはthisをつかいます。 window.onload = function(){ var hai = document.getElementsByTagName("div"); for (var i=0; i<hai.length; i++){ hai[i].onmouseover = function(){ this.className="ame"; } hai[i].onmouseout = function(){ this.className="hare"; } } } まぁ経験の問題ですから、ちょっとかじればすぐできるようになるでしょう

satukun
質問者

お礼

ご回答いただきましてありがとうございます！ なるほど！「this」ですね！ 動きました！ありがとうございます。 もう一つ伺ってもよろしいですか？？すみません・・（汗） 以下の記述方法なんですが、 →hai.item(i) →hai[i] この二つの違いってなんですか？教えて頂いた方で試したら動いたのですが。。 なぜしょうか？わがままですみません。。

その他の回答 (4)

noname#84373
noname#84373
回答No.5

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>test</title> <style type="text/css"> .hare{ background:#f00 url(toumei.gif) no-repeat; width:300px; height:100px;} .ame{ background:#0f0 url(toumei2.gif) no-repeat; width:300px; height:100px;} </style> <body> <div class="hare">a</div> <div class="hare">b</div> <div class="hare">c</div> <div class="hare">d</div> <script type="text/javascript"> var m; document.onmouseover = function(evt) { var o = evt ? evt.target : event.srcElement; if (m) m.className = 'hare'; m=(o.className == 'hare')?(o.className='ame',o):''; } </script> と書けば短いかな？ 以下自分用の記録として onloadやonmouseoverは上書きされるとそれまでのものが無効になる。 なのでイベントを追加する形で登録する。 追加したイベントの呼び出し関数の第一引数はeventが必ず入る。 onmouseoverなどのマウスイベントは、バブリングするので 個々にイベントを貼り付けず、親玉につけるだけで良い。 イベントがmouseoutしなくても、他にmouseoverした時点で それはmouseoutしたことになるので、それをmに記憶させて利用。 他の回答を批判するつもりもないし、立場でもないが、 マウスイベントを数百個取り付けるとなるとどうなるか考えると・・・ と教わったので参考までに、ここに列挙。 自分でもよく理解できていないが、メモリーリークの問題も考えなくてはないらしい。

noname#84373
noname#84373
回答No.4

＞→hai.item(i) ＞→hai[i] ＞この二つの違い たしか hai[i]は配列に代入されたものを参照するとき hai.item(i)はノードを参照するとき

satukun
質問者

お礼

な～るほど～！ 本当に勉強不足でご迷惑をおかけいたしました。。 やっとこれで悩みの種が解消されました！スッキリ！ 本当に感謝です！ ありがとうございました！

noname#84373
noname#84373
回答No.3

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>test</title> <style type="text/css"> .hare{ background:#f00 url(toumei.gif) no-repeat; width:300px; height:100px;} .ame{ background:#0f0 url(toumei2.gif) no-repeat; width:300px; height:100px;} </style> <body> <div class="hare">a</div> <div class="hare">b</div> <div class="hare">c</div> <div class="hare">d</div> <script type="text/javascript"> //@cc_on; //全角空白は半角空白かタブに変換の事 (function(){ /*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/'load', function () { 　var m = null; 　document./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/'mouseover', 　　function (evt) { 　　　var o = evt./*@if(1) srcElement @else@*/ target /*@end@*/; 　　　if (m) m.className = 'hare'; 　　　if (o.tagName == 'DIV' && o.className && o.className == 'hare' ) { 　　　　o.className = 'ame'; 　　　　m = o; 　　　} else { 　　　　m = null; 　　　} 　　} 　, false) }, false); })(); </script>

satukun
質問者

お礼

ご連絡が遅くなりましてもうしわけございません。。。 考え方次第でいろんなスクリプトが組めるんですねぇ！ 僕なんかのためにありがとうございます！ 勉強させていただきました！

  • lookso
  • ベストアンサー率66% (2/3)
回答No.1

まず、 onmouseover = function(){...} という書き方は通用するブラウザと通用しないブラウザがあると思います。IEやFxではダメでしょう? IEのattachEventやFxのaddEventListenerを使ってはいかがでしょうか この部分をかきかえてみたら動きました（下はIE用です） function onfunc(ev){ev.srcElement.className="ame"} function offfunc(ev){ev.srcElement.className="hare"} window.onload = function(){ var hai = document.getElementsByTagName("div"); for (var i=0; i<hai.length; i++){ var obj=hai.item(i); obj.attachEvent("onmouseover",onfunc); obj.attachEvent("onmouseout",offfunc); }}

satukun
質問者

お礼

ご回答ありがとうございます！ へぇ～そうなんですか。。ブラウザによって対応していないことってあるんですね。まだまだ勉強不足ですみません。。。 教えて頂いた方法で試してみたところ動きました！ 本当に助かりました！ありがとうございました！

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • javascirpt 超初心者です・・・すみません。。

    本当に初心者なんでゆるしてください。。 下記のプログラムで、マウスオーバー・アウトでスクリプトを読み込んでスタイルシートを入れ替えようとおもっていました。 ですが、機能してくれません。。 すみませんが、ご教授いただけませんでしょうか？ お願いします。。 --html---------------------------------------------------- <script type="text/javascript" src="test.js"></script> <body> <div class="hare"></div> <div class="hare"></div> <div class="hare"></div> </body> ----------------------------------------------------------- ---css---------------------------------------------------- .hare{ background:url(toumei.gif) no-repeat; width:300px; height:100px;} .ame{ background:url(toumei2.gif) no-repeat; width:300px; height:100px;} ----------------------------------------------------------- ---javascript----------------------------------------------- window.onload = function(){ var hai = document.getElementsByTagName("div"); for (var i=0; i<=hai.length-1; i++){ hai.item(i).onmouseover = function(){ hai.item(i).className="ame"; } hai.item(i).onmouseout = function(){ hai.item(i).className="hare"; } } } -----------------------------------------------------------

  • すみませ～～ん！助けてぇ！

    初心者です・・すいません！ どうしても解決できずに頭抱えています！！うぅ・・。 a要素をマウスオーバーしたらdiv要素のクラスが入れ替わるようにしたいと思い こんなスクリプトを組んでみたんですが・・・できません。。 原因はたぶん function(){～～｝の中身の記述の仕方が違うのかもと・・ そう思っています。 原因を教えていただけませんでしょうか？？ ぜひご教授のほどよろしくお願いいたします。。お願いします！ HTML------------------------------------------------------------------------- <body> <a href="http://www.yahoo.co.jp/" class="waiwai"></a> <a href="http://www.yahoo.co.jp/" class="waiwai" style="top:100px;"></a> <a href="http://www.yahoo.co.jp/" class="waiwai" style="top:200px;"></a> <a href="http://www.yahoo.co.jp/" class="waiwai" style="top:300px;"></a> <div class="hare"></div> <div class="hare"></div> <div class="hare"></div> <div class="hare"></div> </body> CSS------------------------------------------------------------------------- .hare{ display:block; background:url(toumei.gif) no-repeat; width:300px; height:100px;} .ame{ display:block; background:url(toumei2.gif) no-repeat; width:300px; height:100px;} .waiwai{background:url(toumei.gif) no-repeat; width:300px; height:100px; position:absolute; display:block;} javascript------------------------------------------------------------------- window.onload = function(){ var hai = document.getElementsByTagName("div"); var waku = document.getElementsByTagName("a"); for (var i=0; i<waku.length; i++){ waku[i].onmouseover = function(){ hai[i].className="ame"; } waku[i].onmouseout = function(){ hai[i].className="hare"; } } }

  • jQuery 円周上に配置した要素を加工したい

    jQuery 円周上に配置した要素を加工したい ここに円周上に等間隔に要素を配置するコードがあります。 これを下記の要件を満たすためには、どんなコードにしたらよいですか？ ＜要件＞ ・基準点を赤丸で表示させる ・時計の文字盤のような数字の配置にする（真上がゼロ） ・円内の文字が上下左右とも、中央に来るようにする ・数字は赤丸を天にした向きに表示させる <script src='https://code.jquery.com/jquery-3.7.0.min.js'></script> <style> .main-board { position: relative; width: 300px; } .circle-box { } div.item { position: absolute; width: 40px; height: 40px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; background-color: #0dd; } </style> <section class="main-board"> <section class="circle-box"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </section> </section> <script> $(function(){ var item_num = $('div.item').length; var deg = 360.0 / item_num; var red = (deg * Math.PI / 180.0); var circle_r = $("div.item").width() * 2.5; $('div.item').each(function(i, elem) { var x = Math.cos(red * i) * circle_r + circle_r; var y = Math.sin(red * i) * circle_r + circle_r; $(elem).css('left', x); $(elem).css('top', y); $(elem).text(i); }); }); </script>

  • JavaScript初心者です。URLの末尾に含まれる文字列を名前にもつclassのstyleを変更したいです。

    JavaScript初心者です。 URLの末尾に含まれる文字列を名前にもつclassのstyleを変更したいんですが。。 URLに含まれる文字列を名前にもつidのスタイル変更については解決したのですが、同様のことclassでもやりたいと考えています。 例えばURLの末尾が /index.html?AAA&BBB となっている場合、非表示だったAAAとBBBのdivを表示するということをやりたいです。 ソースは以下になります。 前半でURLの末尾を取得して、後半でclassのスタイルを書き換えているつもりです。それぞれでは動作するんですが、あわせると動作しません。自分はかなり初心者ですので、根本的な誤りがあるかもしれませんが、ご教授よろしくお願いします。 <html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>test</title> <style type="text/css"> <!-- .AAA,.BBB,.CCC { width:200px; background-color:#ccc; margin:10px; display:none; } --> </style> <script language=javascript> <!-- function changeStyle(){ var query = window.location.search.substring(1); var search = query.split("&"); for (var i = 0; i < search.length; i++) { var XXX = search[i]; } var allElement = document.getElementsByTagName('*'); for (var j = 0; j < allElement.length; j++) { if (allElement[j].className=='XXX') { allElement[j].style.display = "block"; } } } --> </script> </head> <body onload=changeStyle();> <div class="AAA">111</div> <div class="AAA">222</div> <div class="AAA">333</div> <div class="BBB">444</div> <div class="BBB">555</div> <div class="CCC">666</div> <div class="CCC">777</div> </body> </html>

  • JavascriptでInputClassの表示を変えるには

    　以下のScriptを作りました。Tagの表示情報をScriptで変更したいのです。以下のdiv class="inC1"は変更されます。input class="inIPC2も変更したいのですが、どうもやり方が異なるようです。 　申し訳ありませんがご教授願います。 <html> <head> <title>エレメントの表示</title> </head> <body> <script type="text/javascript"> function Disp_change() { var i = 0, div = document.getElementsByTagName("DIV"); while (div[i]) { if (div[i].className=="inC1") div[i].innerHTML = "change1"; i++; } } function Disp_change_Class() { var i = 0, div = document.getElementsByTagName("DIV"); while (div[i]) { if (div[i].className=="inIPC2") div[i].innerHTML = "change2"; i++; alert ("change2"); } } </script> <body> <div class="frameHead frameDetail"> <div class="inC1">連絡情報</div> <div class="clear"><hr /></div> <div class="inC2"> <input class="button3" type="button" name="fromUserList" value="" onclick="Disp_change()"> <input class="inIPC2">連絡情報</div> </div> <script type="text/javascript"> Disp_change(); Disp_change_Class(); }; </script> </script> </body> </html> 　一応動きますので確認してみてくだされば幸いです。 以上、宜しく御願い致します。

    • ベストアンサー
    • Java
  • htmlファイルでするとできるのにcgiファイルでするとできないのはなぜでしょう？

    お世話になります <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <title>com</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript"><!-- window.onload=function() { document.getElementsByClassName = function (className) { var i, j, eltClass; var objAll = document.getElementsByTagName ? document.getElementsByTagName("*") : document.all; var objCN = new Array(); for (i = 0; i < objAll.length; i++) { eltClass = objAll[i].className.split(/\s+/); for (j = 0; j < eltClass.length; j++) { if (eltClass[j] == className) { objCN.push(objAll[i]); break; } } } return objCN; } obj = document.getElementsByClassName("trans_e"); for(i=0;i<obj.length;i++) { l = obj[i].innerHTML; obj[i].style.width = l + "px"; } } //--></script> <style type="text/css"><!-- .trans_a { float:left; width:20px; } .trans_b { float:left; width:100px; } .trans_c { margin-top:10px; } .trans_d { float:left; width:200px; } .trans_e { background-color:red; margin-bottom:2px; } --></style> </head> <body> <div> <div class="trans_a">&nbsp;</div> <div class="trans_b"><img src="./img/non.png" alt="$shuzoku"> <div class="trans_c">$type</div></div> <div class="trans_d"> <div class="trans_e">41</div> <div class="trans_e">40</div> <div class="trans_e">47</div> <div class="trans_e">35</div> <div class="trans_e">22</div> <div class="trans_e">11</div> </div> </div> </body> </html> このようにclass="trans_e"のところをその中に書かれている数値で幅を可変させようとしているのですがhtmlファイルで試すと思ったようなことをしてくれるのですがcgiファイルに組み込むと幅が100％のまま変わらないのですが解決策をご存知の方いらっしゃいますでしょうか？ getElementByIdですればできるのですが結構数があるものですので・・・－－；

  • 同じ i 番目のclassを連動させることはできますか？

    お世話になります <script type="text/javascript"><!-- window.onload = function() { document.getElementsByClassName = function (className) { var i, j, eltClass; var objAll = document.getElementsByTagName ? document.getElementsByTagName("*") : document.all; var objCN = new Array(); for (i = 0; i < objAll.length; i++) { eltClass = objAll[i].className.split(/\s+/); for (j = 0; j < eltClass.length; j++) { if (eltClass[j] == className) { objCN.push(objAll[i]); break; } } } return objCN; } obj0 = document.getElementsByClassName("id"); obj1 = document.getElementsByClassName("pass"); for(i=0;i<obj0.length;i++) { obj0[i].onclick = function() { obj1[i].style.display = "block"; } } } //--></script> <style type="text/css"><!-- .id { width:150px; float:left; cursor:pointer; } .pass { display:none; } .pass0 { width:100px; } --></style> <div class="id">名前1</div> <div class="pass"> <input type="password" name="password" class="pass0"> <input type="button" name="login" value="LOG IN" class="login"> </div> <div class="id">名前1</div> <div class="pass"> <input type="password" name="password" class="pass"> <input type="button" name="login" value="LOG IN" class="login"> </div> のような感じでclass("id")[0]をクリックしたらclass("pass")[0]を表示、class("id")[1]をクリックしたらclass("pass")[1]を表示・・・というふうにしたいのですがなかなかうまくいきません＞＜ 名前とパス両方を入力にしてやる方法もできますし、 それぞれのclass("id")にfunction()を振って obj0[0].onclick = function() { obj1[0].style.display = "block"; } obj0[1].onclick = function() { obj1[1].style.display = "block"; } のようなやり方もできるのはできます 後者のやり方は他の部分でもいろいろ使っているので記事やメンバーが増えるたびに新たに追加していかないといけないので***.onclick = function() { } を配列にするなどまとめてできる方法があれば教えていただきたいのですが＾＾；

  • jQueryのfilterについて

    jQuery初心者です。 .filterを使って、特定のCSSプロパティの値を持つものを検索し、抽出したもののCSSを書換えたいのですが、うまくいきません。 -------------------- z-indexの値が0以上のdivのwidthを200pxに変えるというコードを書いたつもりなんですが動きません。 ※head内 <style type="text/css"> <!-- div.animal { height:50px; border:5px solid red; background:rgb(255,140,0); } #neko { width:50px; position: absolute; z-index: 0; top: 50px; left: 50px; } #inu { width:50px; position: absolute; z-index: 1; top: 70px; left: 70px; } //--> </style> <script type="text/javascript" src="/js/prototype.js"></script> <script type="text/javascript"> $('div').filter(function(){ return (parseInt($(this).css("z-index").text())>0); }).css("width","200px") </script> ※body内 <div id=neko class=animal></div> <div id=inu class=animal></div> 詳しい方が居られましたら、ご教授いただけませんでしょうか？よろしくお願いします。

  • jQuery JavaScript

    初めての質問ですがよろしくお願いします。 とあるシステムをphp+jQueryで開発しています。 <div class="item1" id="item1">アイテム名</div> このdviがクリックされた時に、 $(document).ready(function() { $('div[class^="item"]').mouseover(function(ev) { $(this).css('cursor', 'pointer'); }).click(function(ev) { // **この部分** // }); }); クリックイベント内でクリックされたclassNameかid名を取得する （この場合は item1 を文字列として取得したい） にはどうしたらよいのでしょうか？

  • このコードを処理速度向上させることはできますか？

    このコードを処理速度向上させることはできますか？ <?xml version="1.0" encoding="utf-8"?> <!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript"> //<![CDATA[ function className(str){ var alltag = document.getElementsByTagName("*"); var ary = []; for(var i=0;i<alltag.length;i++){ if("."+alltag[i].className == str){ ary.push(alltag[i]); } } return ary; } window.$ = function(str){ var ID = str.match(/^#(\w+)/), CLASS = str.match(/^\.(\w+)/), TAG = str.match(/^(\w+)|(\*)/), node = str.match(/^doc/)? document: TAG? document.getElementsByTagName(RegExp.$1==""?RegExp.$2:RegExp.$1): ID? document.getElementById(RegExp.$1): CLASS? navigator.appVersion.toLowerCase().indexOf("msie")? className(str): document.getElementsByClassName(RegExp.$1): null; this.style = function(css){ css = css.split(/\:|\;/); if(ID){ for(var j=0;j<css.length;j++) node.style[css[j].replace(/\s+/g,"").replace(/\-(\w)/,function($1){$1=$1.substr(1);return $1.toUpperCase()})] = css[j+1]; }else{ for(var i=0;i<node.length;i++){ for(var j=0;j<css.length;j++) node[i].style[css[j].replace(/\s+/g,"").replace(/\-(\w)/,function($1){$1=$1.substr(1);return $1.toUpperCase()})] = css[j+1]; } } } return this; } window.onload = function(){ var st = new Date().getTime(); for(var i=0;i<10000;i++){ $('#wrap').style("color:#00f; background:#f00; border-left:10px solid #000;"); $('div').style("border-right:10px solid #000; width:100px; height:100px; margin:10px;"); $('.cl').style("border-top:10px solid #000; background:#00f;"); } var end = new Date().getTime(); alert(end-st); } //]]> </script> <title></title> </head> <body> <div id="wrap">aaaaa</div> <div class="cl">bbb</div> <div class="cl">ccc</div> </body> </html> 他にも、もっとこうしたほうが…等ありましたら教えてください。どうか宜しくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する