Google Sheets Forkus

JavaScriptで、複数のCSSクラスに動作を加える方法【wordpress】

JavaScriptで、複数のCSSクラスに動作を加える方法【wordpress】

JavaScript (JS)で、複数のCSSクラスに動作を加える方法が知りたい。


今回は、こんなお悩みを解決します。


本記事で学べること
・１つのJSを複数CSSクラスに加える、”querySelectorAll()” の使い方

例えば、以下の各ボタンの大きさや位置（CSSクラス）は異なっています。しかし、クリックした後の動き方（JS）は、どれも同じですね。



クリックしてみよう
　見た目（CSSファイル）は３つとも異なるけれど…

動き方（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()の解説

今回は、関数を３つに区切って説明して行くわ。
var toGetCss3 = document.2querySelectorAll('.button-1, .button-2, .button-3');1


各CSSクラスに、JS動作が追加されているか確かめる方法

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

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


RECOMMENDこちらの記事も人気です。