\r\n\r\n\r\n \r\n\r\n\r\n\r\n```\r\n```js\r\nfunction changeBackColor(){\r\n var elements = document.getElementsByClassName(\"btn\");\r\n document.querySelector('li').classList.add('btnColorChange');\r\n for(i=0;i\r\n
  • ホーム
  • \r\n
  • アクセス
  • \r\n
  • メニュー
  • \r\n\r\n```\r\n\r\n```js\r\nfunction changeBackColor(e){\r\n e.classList.add('btnColorChange');\r\n}\r\n```","dateModified":"2020-02-02T09:06:23.446Z","datePublished":"2020-02-02T09:06:23.446Z","upvoteCount":1,"url":"https://teratail.com/questions/239040#reply-347399"},"suggestedAnswer":[],"breadcrumb":{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"https://teratail.com","name":"トップ"}},{"@type":"ListItem","position":2,"item":{"@id":"https://teratail.com/tags/JavaScript","name":"JavaScriptに関する質問"}},{"@type":"ListItem","position":3,"item":{"@id":"https://teratail.com/questions/239040","name":"class名が同じliに、それぞれonmouseover属性を当てたい(onmouse時に実行)"}}]}}}
    質問するログイン新規登録

    Q&A

    解決済

    1回答

    609閲覧

    class名が同じliに、それぞれonmouseover属性を当てたい(onmouse時に実行)

    mochigometarou

    総合スコア5

    JavaScript

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

    HTML

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

    0グッド

    0クリップ

    投稿2020/02/02 08:36

    編集2020/02/02 09:04

    0

    0

    前提・実現したいこと

    前提
    ・li class=btnの背景色をjsで変更したいです。
    ・ul中のliは複数あり、すべてclass名は同じ指定をしています。
    ・現状、全てにonmouseoverがあるので、一つのliを選択すると最初のliにclass(btnColorChange)が追加される状態です。

    実現したいこと
    どれか一つのliをmouseoverした時に最初のliのみclassが追加される
    mouseoverしたliのbackground-colorが変更されるようにしたいです。

    HTML

    html

    1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>Sample</title> 6 <link rel="stylesheet" href="style.css"> 7 <script src="common.js"></script> 8</head> 9<body> 10 <ul> 11 <li class="btn" onmouseover="changeBackColor();">ホーム</li> 12 <li class="btn" onmouseover="changeBackColor();">アクセス</li> 13 <li class="btn" onmouseover="changeBackColor();">メニュー</li> 14 </ul> 15</body> 16</html> 17

    js

    1function changeBackColor(){ 2 var elements = document.getElementsByClassName("btn"); 3 document.querySelector('li').classList.add('btnColorChange'); 4 for(i=0;i<elements.length;i++){ 5 } 6}

    css

    1.btn{ 2 display: inline-block; 3 padding: 0.5em 1em; 4 color: #000; 5 border-radius: 5px; 6 cursor: pointer; 7 border: 1px solid grey; 8 transition: 0.15s; 9} 10 11.btnColorChange{ 12 background-color:yellow; 13} 14

    試したこと

    ・jsにてliにthisを付与してonmouseoverしたliにのみ実行できるように試行しましたが上手くいきませんでした。

    以下追記になります。
    js初心者のため見当違いのことをしているかもしれません。

    試行① jsでselectされているliにthisを当てた

    js

    1function changeBackColor(){ 2 var elements = document.getElementsByClassName("btn"); 3 document.querySelector('li.this').classList.add('btnColorChange'); 4 for(i=0;i<elements.length;i++){ 5 } 6}

    試行② 追加したいclass名にthisを当てた

    js

    1function changeBackColor(){ 2 var elements = document.getElementsByClassName("btn"); 3 document.querySelector('li').classList.add('btnColorChange.this'); 4 for(i=0;i<elements.length;i++){ 5 } 6} 7}

    気になる質問をクリップする

    クリップした質問は、後からいつでもMYページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    バッドをするには、ログインかつ

    こちらの条件を満たす必要があります。

    kei344

    2020/02/02 08:41

    試したコードを提示してください。
    m.ts10806

    2020/02/02 08:47

    >jsにてliにthisを付与して これでできると思ったのですけど、きちんと「自身」を参照するように組めてないだけだと思います。そのコードを提示してください。
    mochigometarou

    2020/02/02 09:06

    追記致しました。試行は①②共にmouseoverしてもどこにも変化がない状態になるようでした。 よろしくお願いします。
    m.ts10806

    2020/02/02 09:13

    思ってたのと全然違った・・・。
    guest

    回答1

    0

    ベストアンサー

    引数で自分自身(this)を渡せばいいでしょう。

    html

    1<ul> 2 <li class="btn" onmouseover="changeBackColor(this)">ホーム</li> 3 <li class="btn" onmouseover="changeBackColor(this)">アクセス</li> 4 <li class="btn" onmouseover="changeBackColor(this)">メニュー</li> 5</ul>

    js

    1function changeBackColor(e){ 2 e.classList.add('btnColorChange'); 3}

    投稿2020/02/02 09:06

    hatena19

    総合スコア34367

    バッドをするには、ログインかつ

    こちらの条件を満たす必要があります。

    mochigometarou

    2020/02/02 09:09 編集

    ありがとうございます。こちらで解決いたしました。 引数について理解があまりなかったので、勉強になりました。
    guest

    あなたの回答

    tips

    太字

    斜体

    打ち消し線

    見出し

    引用テキストの挿入

    コードの挿入

    リンクの挿入

    リストの挿入

    番号リストの挿入

    表の挿入

    水平線の挿入

    プレビュー

    15分調べてもわからないことは
    teratailで質問しよう!

    ただいまの回答率
    85.29%

    質問をまとめることで
    思考を整理して素早く解決

    テンプレート機能で
    簡単に質問をまとめる

    質問する

    関連した質問