JavaScriptで、複数のCSSクラスに動作を加える方法【wordpress】
.png?w=728&ssl=1)
JavaScript (JS)で、複数のCSSクラスに動作を加える方法が知りたい。
今回は、こんなお悩みを解決します。
本記事で学べること
・1つのJSを複数CSSクラスに加える、”querySelectorAll()” の使い方
例えば、以下の各ボタンの大きさや位置(CSSクラス)は異なっています。しかし、クリックした後の動き方(JS)は、どれも同じですね。
クリックしてみよう
見た目(CSSファイル)は3つとも異なるけれど…
動き方(JSファイル)は..
どれも一緒!
このように、複数のCSSクラスに同じ動作(JS)を追加したい時、そのJSファイル内に"query Selector All Method"
を用いることで、追加することができます。
目次
“querySelectorAll Method” の使い方
JSファイルを追加する、CSSクラス名を確認

CSSクラス名は、上から、.button-1, .button-2, .button-3よ。クラス名の頭には「.」が付くから気をつけましょう。
/* ボタン1の作り方(CSS) */ .button-1 { position: relative; font-size: 0.6em;/* 文字の大きさ*/ font-weight: bold;/*文字の太さ*/ color: #545454;/*文字色*/ background-color: #cccccc26;/*背景色 */ bottom: -4px;/*要素の下限から更に4px下げる*/ border-radius: 5px 5px 0 0;/*四隅の丸み 左上から時計回り */ padding: 3px 6px 3px;/* 文字と枠線のスペース 上右下左 */ line-height: 1;/*行間の長さ*/ letter-spacing: 0.05em;/*文字間の長さ*/ margin-top: 1em;/*ボタンの上のスペースの長さ*/ margin-left: 1em;/*ボタンの左のスペースの長さ*/ cursor: pointer;/*マウスで上に当てた時のカーソルの形*/ transition: 0.4s; /*色がボヤ〜と変わる時の速度*/ outline: none;/*内枠線をなくす*/ } .button-1:hover/*マウスでボタン上に当てた時に起こしたい変化*/ { background: #87ceeb;/*background-colorの"color"は省略可*/ color: #fff;/*文字色*/ }
.button-2 { background-color: #cccccc26; color: #545454; font-weight: bold; cursor: pointer; padding: 6px;/*四隅の丸み全てが6px*/ width: 100%;/*100%横幅いっぱい*/ text-align: left;/*文字左寄せ*/ outline: none;/*内枠をなくす*/ transition: 0.4s; } .button-2:hover { background-color: rgba(228, 241, 254, 1); } .button-2:after { content: '\02795'; /* + サインのUnicode */ font-size: 13px; color: #00FF7F; float: right; margin-left: 5px; } .active:after { content: "\2796"; /* - サインのUnicode */ margin-left: 5px; }
.button-3 { margin: 0em auto; margin-top: 1.5em; background-color: #cccccc26; color: #545454; font-weight: bold; cursor: pointer; padding: 8px 13px; text-align: center; border: none; outline: none; transition: 0.4s; border-radius: 20px; display: flex; align-items: center; } .active, .button-3:hover { background-color: rgba(228, 241, 254, 1); } .button-3:after { display: flex; content: '\02795'; /*contentプロパティは:before や :afterのような CSS pseudo-elements でしか使用できません。*/ font-size: 13px; color: #00FF7F; margin-left: 10px; } .active:after { content: "\2796"; }
クリックすると、各ボタンの作り方(CSSファイル)が見れます。
querySelectorAll() 内にCSSクラス名を挿入

確認したCSSクラス名を、querySelectorAll()のカッコ内に挿入するだけで、以下のJSによる動きを加えられるわ。
シングルクォーテーションで囲むことを忘れないでね。
シングルクォーテーションで囲むことを忘れないでね。
/* JavaScript */ /* 動きを追加したい各CSSクラスをカッコ内に挿入し、JSファイル内に取ってくる */ var toGetCss = document.querySelectorAll('.button-1, .button-2, .button-3'); /* 以下アコーディオンの動きを命じるJavaScript */ var i; for (i = 0; i < toGetCss.length; i++) { toGetCss[i].addEventListener("click", function() { /* ボタンのクリックに応じて"active" クラスを加えたり、外すtoggle(=切り替え処理)*/ this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.maxHeight) { panel.style.maxHeight = null; } else { panel.style.maxHeight = panel.scrollHeight + "px"; } }); }
querySelectorAll()の解説

今回は、関数を3つに区切って説明して行くわ。
var toGetCss = document.querySelectorAll('.button-1, .button-2, .button-3');
各CSSクラスに、JS動作が追加されているか確かめる方法

ブラウザがChromeであれば、DevToolsを使って、これらのCSSクラスにJSが追加されているかを確認出来るわ。

【手順】ボタン1の上で右クリック →「要素を調査(Inspect)」を選択 → DevToolsで対象のCSSへ