###前提・実現したいこと
WEBデザインを勉強中のものです。
複数のinputタグにonmouseoverでスタイルを変える方法がわかりません。inputタグのonmouseover属性に関数を書くのではなくwindow.onloadで実行したいんですが・・・
下記のソースコードのイメージでできませんか?
###該当のソースコード
javascript
1 window.onload = function(){ 2 var txtbx; 3 var num; 4 var i; 5 txtbx = document.getElementsByTagName("input"); 6 num = txtbx.length; 7 for(i = 0;i < num;i++){ 8 txtbx[i].onmouseover = function(){ 9 //ここに書くべき処理がわかりません 10 //下のソースではもちろん動きませんがイメージとしてはこのような感じです 11 //txtbx[i].style.border= "1px solid #000"; 12 }; 13 } 14 }
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答3件
0
onmouseover
に書いてしまうと2つ以上の関数を登録できず上書きしてしまうので、addEventListener
を使ったほうが良いような。
【動くサンプル】https://jsfiddle.net/dp5kc1t2/
CSS
1.mouseover { border: 1px solid #000; };
JavaScript
1var txtbx = document.getElementsByTagName( 'input' ) 2 , i, l = txtbx.length 3 ; 4for( i = 0; i < l; i++ ){ 5 txtbx[ i ].addEventListener( 'mouseenter', function( e ) { 6 e.currentTarget.classList.add( 'mouseover' ); 7 }, false ); 8 txtbx[ i ].addEventListener( 'mouseleave', function( e ) { 9 e.currentTarget.classList.remove( 'mouseover' ); 10 }, false ); 11}
classList
がIE10+、addEventListener
currentTarget
がIE9+ なのでそろそろ使えるかなという感じです。(当然別の書き方もあります)
【JavaScriptでよく使うDOM操作とか - Qiita】
http://qiita.com/okkunokkun18/items/10a0a40cba0022dff617#onclick-と-addeventlistenerclick-の違い
【element.classList - Web API インターフェイス | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Element/classList
【EventTarget.addEventListener - Web API インターフェイス | MDN】
https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener
【Event.currentTarget - Web API インターフェイス | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Event/currentTarget
ちなみに i
をイベントに渡したいときは下記のようにするとできます。
【動くサンプル】https://jsfiddle.net/dp5kc1t2/1/
JavaScript
1var txtbx = document.getElementsByTagName( 'input' ) 2 , i, l = txtbx.length 3 ; 4for( i = 0; i < l; i++ ){ 5 txtbx[ i ].addEventListener( 'mouseenter', ( function( int ) { 6 return function( e ) { 7 e.currentTarget.classList.add( 'mouseover' ); 8 e.currentTarget.id = 'id' + int; 9 }; 10 } )( i ), false ); 11 txtbx[ i ].addEventListener( 'mouseleave', function( e ) { 12 e.currentTarget.classList.remove( 'mouseover' ); 13 }, false ); 14}
【JavaScriptで即時関数を使う理由 - Qiita】
http://qiita.com/katsukii/items/cfe9fd968ba0db603b1e
【即時関数のメリットと主な用途|もっこりJavaScript|ANALOGIC(アナロジック)】
http://analogic.jp/immediate-function/
いっそこうも書ける。
【動くサンプル】https://jsfiddle.net/dp5kc1t2/3/
JavaScript
1[].forEach.call( document.getElementsByTagName( 'input' ), function( ele, i, arr ) { 2 ele.addEventListener( 'mouseenter', function( e ) { 3 e.currentTarget.classList.add( 'mouseover' ); 4 e.currentTarget.id = 'id' + i; 5 }, false ); 6 ele.addEventListener( 'mouseleave', function( e ) { 7 e.currentTarget.classList.remove( 'mouseover' ); 8 }, false ); 9}); // IE9+
【Array.prototype.forEach() - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
【配列ライクなオブジェクトをforEachするときのイディオム - ぷちてく - Petittech】
http://ptech.g.hatena.ne.jp/noromanba/20120521/1337639496
投稿2016/05/05 18:18
編集2016/05/05 19:27総合スコア69407
0
複数のinputタグにonmouseoverでスタイルを変える方法
http://start-now.link/100/archives/2277
の用な感じで、cssのclass指定でclass名:hoverのスタイルを設定してあげる。
投稿2016/05/05 16:46
総合スコア1124
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
0
ベストアンサー
その書き方でほとんど合っていますが,イベントを引き起こしたDOMにアクセスする場合は,thisを使います。
以下のコードで治らなければどこか指定が間違っているだけだと思うので,こちらも参考にしてみてください。
javascript
1var txtbx = document.getElementsByTagName("input"); 2var length = txtbx.length; 3 for(var i = 0; i<length;i++){ 4 txtbx[i].onmouseover = function(event){ 5 this.style.border= "1px solid #000"; 6 } 7}
投稿2016/05/05 17:02
退会済みユーザー
総合スコア0
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/05/05 17:14
退会済みユーザー
2016/05/05 17:36 編集
2016/05/05 22:54
退会済みユーザー
2016/05/05 23:31
2016/05/06 04:58
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2016/05/05 18:53
2016/05/05 19:15 編集
2016/05/05 19:29
退会済みユーザー
2016/05/05 22:51
2016/05/05 23:02 編集
退会済みユーザー
2016/05/05 23:30
2016/05/05 23:43 編集
退会済みユーザー
2016/05/06 00:10