【JavaScript】要素にクラスを追加するならadd()！

エンジニアに特化した転職エージェント！

・IT/Web系エンジニアの経験者の方
・どこの転職エージェントを利用しようか迷っている方

それなら、キッカケエージェントにご相談！

キッカケエージェントでは、少数精鋭のエージェントが、エンジニアの経験やスキル、志向性などをカウンセリングし、的確なアドバイスを提供します！

また、徹底した企業へのヒアリングにより、最適なマッチングを実現し、今では内定率が一般的なエージェントの2倍以上となっています！

転職エージェントに迷っている方、まずは無料でキャリア相談から！

エンジニア特化の転職支援【キッカケエージェント】

(この記事は2023年07月22日に投稿されました。)

JavaScriptで要素にクラスを追加する方法として、add()があります。

add()とは、要素に指定したクラスを追加するメソッドになります。

クラスを追加することからボタンを押した時や要素が作成されたなど、何かしらのイベントが起きた際に使用することができます。

そして、add()は基本単一のクラスを追加しますが、複数のクラスを一気に追加することも可能です。

また、ボタンを押してクラスを追加する静的処理だけでなく、イベント発生後に連鎖してクラスを追加する動的処理も行うこともできます。

クラスを動的に追加したいケースは多々あるかと思いますので、「このタイミングでクラスを追加したい！」と思った場合はadd()を使用しましょう。

今回はJavaScriptのadd()でクラスを追加する方法について解説していきます。

この記事はこんな方におすすめ

add()とは

add()とは指定した要素にクラスを追加することができるメソッドとなります。

指定した要素のクラスプロパティの末尾に追加されるようになります。

add()の書き方

add()の書き方は下記のようになります。

要素.classList.add(クラス名)

1	要素.classList.add(クラス名)

要素の後ろにclassList.add()と追記することで使用することができます。

また、add()はclassListで準備されているメソッドであるため、add()の前に「classList」を追記しないとエラーになります。

add()の引数

add()の引数は下記のようになります。

クラス名(必須):
要素に追加するクラス名を指定する

add()は必須な引数として「クラス名」を指定します。

add()の返り値

add()の返り値はありません。

add()でクラスの追加を行うサンプルコード

add()でクラスの追加を行うサンプルコードをご紹介します。

ここでは、下記の2つのケースでadd()を使用します。

別名のクラスを追加する場合
重複するクラスを追加する場合

別名のクラスを追加する場合

別名のクラスを追加する場合にadd()を使用すると、指定した要素にクラスが追加されます。

● index.htm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="main.js"></script>
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>add()でクラスを追加</title>
</head>
<body>
  <p>add()でクラスを追加する</p>
  <div class="ele">この要素にクラスを追加</div>
  <button type="button" class="btn1">追加1</button>
  <button type="button" class="btn2">追加2</button>
</body>
</html>

<!DOCTYPE html>

<head>

<title>add()でクラスを追加</title>

</head>

<body>

<p>add()でクラスを追加する</p>

<div class="ele">この要素にクラスを追加</div>

</body>

</html>

● style.css

.ele {
    border: 1px solid green;
    color: green;
    padding: 5px;
    font-size: 15px;
    width: 200px;
    height: 125px;
}
.two-times {
    width: 400px;
    height: 250px;
    font-size: 30px;
}
.three-times {
    width: 600px;
    height: 375px;
    font-size: 45px;
}
.btn1, .btn2 {
    margin-top: 10px;
}

.ele {

border: 1px solid green;

color: green;

padding: 5px;

font-size: 15px;

width: 200px;

height: 125px;

}

.two-times {

width: 400px;

height: 250px;

font-size: 30px;

}

.three-times {

width: 600px;

height: 375px;

font-size: 45px;

}

.btn1, .btn2 {

margin-top: 10px;

}

● main.js

window.addEventListener('load', function() {
  let btn1 = document.querySelector('.btn1')
  btn1.addEventListener('click', function(){
    let ele = document.querySelector('.ele')
    ele.classList.add('two-times')
  })
  let btn2 = document.querySelector('.btn2')
  btn2.addEventListener('click', function(){
    let ele = document.querySelector('.ele')
    ele.classList.add('three-times')
  })
})

window.addEventListener('load', function() {

let btn1 = document.querySelector('.btn1')

btn1.addEventListener('click', function(){

let ele = document.querySelector('.ele')

ele.classList.add('two-times')

})

let btn2 = document.querySelector('.btn2')

btn2.addEventListener('click', function(){

let ele = document.querySelector('.ele')

ele.classList.add('three-times')

})

実行結果

実行結果(ソースコード)

add()によってクラスの追加を行っています。

そのため、「追加1」ボタンをクリックすると、「two-times」クラスが追加され、「追加2」ボタンをクリックすると「three-times」クラスが追加されています。

重複するクラスを追加する場合

重複するクラスを追加する場合にadd()を使用すると、重複したクラスは無視されるようになります。

● index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="main.js"></script>
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>add()でクラスを追加</title>
</head>
<body>
  <p>add()でクラスを追加する</p>
  <div class="ele">この要素にクラスを追加</div>
  <button type="button" class="btn1">追加</button>
  <button type="button" class="btn2">追加</button>
</body>
</html>

<!DOCTYPE html>

<head>

<title>add()でクラスを追加</title>

</head>

<body>

<p>add()でクラスを追加する</p>

<div class="ele">この要素にクラスを追加</div>

</body>

</html>

● style.css

.ele {
    border: 1px solid blue;
    color: blue;
    padding: 5px;
    font-size: 15px;
    width: 200px;
    height: 125px;
}
.two-times {
    width: 400px;
    height: 250px;
    font-size: 30px;
}
.btn1, .btn2 {
    margin: 10px 0;
}

.ele {

border: 1px solid blue;

color: blue;

padding: 5px;

font-size: 15px;

width: 200px;

height: 125px;

}

.two-times {

width: 400px;

height: 250px;

font-size: 30px;

}

.btn1, .btn2 {

margin: 10px 0;

}

● main.js

window.addEventListener('load', function() {
  let btn1 = document.querySelector('.btn1')
  btn1.addEventListener('click', function() {
    let ele = document.querySelector('.ele')
    ele.classList.add('two-times')
  })
  let btn2 = document.querySelector('.btn2')
  btn2.addEventListener('click', function() {
    let ele = document.querySelector('.ele')
    ele.classList.add('two-times')
  })
})

window.addEventListener('load', function() {

let btn1 = document.querySelector('.btn1')

btn1.addEventListener('click', function() {

let ele = document.querySelector('.ele')

ele.classList.add('two-times')

})

let btn2 = document.querySelector('.btn2')

btn2.addEventListener('click', function() {

let ele = document.querySelector('.ele')

ele.classList.add('two-times')

})

実行結果

実行結果(ソースコード)

add()によってクラスの追加を行っています。

既に存在してるクラスを追加しようとしているため、処理は行われますが追加は行われていません。

複数のクラス名を一度に追加する場合

add()で複数のクラス名を一度に追加するには…(スプレッド演算子)を使用します。

…(スプレッド演算子)とは、配列やオブジェクトなどの要素を展開して個別の要素として扱うことができる演算子になります。

そのため、追加したいクラス名の配列をadd()の引数として指定し、スプレッド演算子を使用することで複数のクラス名を一度に追加することができます。

● index.htm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="main.js"></script>
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>add()でクラスを追加</title>
</head>
<body>
  <p>add()でクラスを追加する</p>
  <div class="ele two-times">この要素にクラスを追加</div>
  <button type="button" class="btn">追加</button>
</body>
</html>

<!DOCTYPE html>

<head>

<title>add()でクラスを追加</title>

</head>

<body>

<p>add()でクラスを追加する</p>

<div class="ele two-times">この要素にクラスを追加</div>

</body>

</html>

● style.css

.btn {
    margin-top: 10px;
}
.ele {
    border: 2px solid black;
    color: black;
    padding: 5px;
    font-size: 20px;
    width: 250px;
    height: 125px;
}
.two-times {
    width: 500px;
    height: 250px;
    font-size: 40px;
    border: 4px solid black
}
.red {
    border: 4px solid red;
    color: red;
}

.btn {

margin-top: 10px;

}

.ele {

border: 2px solid black;

color: black;

padding: 5px;

font-size: 20px;

width: 250px;

height: 125px;

}

.two-times {

width: 500px;

height: 250px;

font-size: 40px;

border: 4px solid black

}

.red {

border: 4px solid red;

color: red;

}

● main.js

window.addEventListener('load', function() {
  let btn = this.document.querySelector('.btn')
  btn.addEventListener('click', function() {
    let ele = document.querySelector('.ele')
    let classNames = ['two-times', 'red'];
    ele.classList.add(...classNames);
  })
})

window.addEventListener('load', function() {

let btn = this.document.querySelector('.btn')

btn.addEventListener('click', function() {

let ele = document.querySelector('.ele')

let classNames = ['two-times', 'red'];

ele.classList.add(...classNames);

})

実行結果

実行結果(ソースコード)

add()によって複数のクラス名を一度に追加しています。

そのため、「two-times」クラスによって要素と文字の大大きさが2倍、「red」クラスによって枠線と文字の色が赤色になって表示されています。

add()を使用した実際のケース

add()を使用した実際のケースを下記の3ケースでご紹介します。

HTML要素に新しいクラスを追加する
イベント処理中にクラスを追加する
繰り返し処理内で動的にクラスを追加する

HTML要素に新しいクラスを追加する

add()を使用することでHTML要素に新しいクラスを追加することができます。

例えば、ページをロードした瞬間にクラスを付与するようなコードを作成します。

● index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="main.js"></script>
  <link rel="stylesheet" href="style.css">
  <title>HTML要素に新しいクラスを追加</title>
</head>
<body>
  <div class="wrapper"></div>
  <header>headerエリア</header>
  <div class="container">
    <main>mainエリア</main>
    <aside>sideエリア</asi>
  </div>
  <footer>footerエリア</footer>
</div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>HTML要素に新しいクラスを追加</title>

</head>

<body>

<header>headerエリア</header>

<main>mainエリア</main>

<aside>sideエリア</asi>

</div>

<footer>footerエリア</footer>

</div>

</body>

</html>

● style.css

.wrapper {
    max-width: 1000px;
    margin: 0 auto;
}
.header-area {
    background: white;
    width: 100%;
    height: 100px;
    border: 1px solid black;
}
.container {
    display: flex;
}
.main-area {
    background: tomato;
    width: 70%;
    height: 100px;
    border: 1px solid black;
}
.sidebar-area {
    background: skyblue;
    width: 30%;
    height: 100px;
    border: 1px solid black;
}
.footer-area {
    background: grey;
    width: 100%;
    height: 100px;
    border: 1px solid black;
}

.wrapper {

max-width: 1000px;

margin: 0 auto;

}

.header-area {

background: white;

width: 100%;

height: 100px;

border: 1px solid black;

}

.container {

display: flex;

}

.main-area {

background: tomato;

width: 70%;

height: 100px;

border: 1px solid black;

}

.sidebar-area {

background: skyblue;

width: 30%;

height: 100px;

border: 1px solid black;

}

.footer-area {

background: grey;

width: 100%;

height: 100px;

border: 1px solid black;

}

● main.js

window.addEventListener('load', function() {
  let header = document.querySelector('header')
  header.classList.add('header-area')

  let main = document.querySelector('main')
  main.classList.add('main-area')

  let sidebar = document.querySelector('aside')
  sidebar.classList.add('sidebar-area')

  let footer = document.querySelector('footer')
  footer.classList.add('footer-area')
})

window.addEventListener('load', function() {

let header = document.querySelector('header')

header.classList.add('header-area')

let main = document.querySelector('main')

main.classList.add('main-area')

let sidebar = document.querySelector('aside')

sidebar.classList.add('sidebar-area')

let footer = document.querySelector('footer')

footer.classList.add('footer-area')

})

実行結果

add()を使用してHTML要素に新しいクラスを追加しています。

そのため、ページをロードするとクラスが付与されたHTML要素が表示されています。

イベント処理中にクラスを追加する

add()を使用することで、イベント処理中にクラスを追加することができます。

例えば、スクロールすると要素が連鎖して表示されるコードを作成します。

● index.html

<!DOCTYPE html>
<html lang="en">
<head>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="main.js"></script>
  <link rel="stylesheet" href="style.css">
  <title>add()でイベント処理中にクラスを追加</title>
</head>
<body>
  <button type="button" class="btn">↓</button>
  <div class= "content content1">その1</div>
  <div class= "content content2">
    その2
    <div class= "content2-item">
      <p>泣けぬなら</p>
      <p>鳴くまで待とう</p>
      <p>ホトトギス</p>
      <p>作詞: 豊臣秀吉</p>
    </div>
  </div>
  <div class= "content content3">その3</div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>add()でイベント処理中にクラスを追加</title>

</head>

<body>

その2

<p>泣けぬなら</p>

<p>鳴くまで待とう</p>

<p>ホトトギス</p>

</div>

</body>

</html>

● style.css

.content {
    height: 750px;
    width: auto;
    text-align: center;
    font-size: 20px;
}
.content1, .content3 {
    background: gainsboro;
}
.content2 {
    background: white;
}
.content2-item {
    opacity: 0;
    z-index: 1;
    position: relative;
    margin: -160px 0px 0px 0px;
    transition: 1s;
}
.btn {
    position: absolute;
    padding: 10px 15px;
    font-size: 15px;
}
.active {
    opacity: 1;
    margin: 0px;
}

.content {

height: 750px;

width: auto;

text-align: center;

font-size: 20px;

}

.content1, .content3 {

background: gainsboro;

}

.content2 {

background: white;

}

.content2-item {

opacity: 0;

z-index: 1;

position: relative;

margin: -160px 0px 0px 0px;

transition: 1s;

}

.btn {

position: absolute;

padding: 10px 15px;

font-size: 15px;

}

.active {

opacity: 1;

margin: 0px;

}

● main.js

window.addEventListener('load', function() {
    let btn = document.querySelector('.btn')
    btn.addEventListener('click', function(){
        window.scroll({
            top: 750,
            behavior: "smooth"
        });
    })
    let ff = setInterval(() => {
            let scroll = window.scrollY;
            if(scroll >= 700) {
            let item = document.querySelector('.content2-item')
            item.classList.add('active')
        }
    }, 100);
})

window.addEventListener('load', function() {

let btn = document.querySelector('.btn')

btn.addEventListener('click', function(){

window.scroll({

top: 750,

behavior: "smooth"

});

})

let ff = setInterval(() => {

let scroll = window.scrollY;

if(scroll >= 700) {

let item = document.querySelector('.content2-item')

item.classList.add('active')

}

}, 100);

})

実行結果

add()を使用してイベント処理中にクラスを追加しています。

そのため、ボタンを押すと指定の箇所までスクロールしてHTML要素が表示されています。

繰り返し処理内で動的にクラスを追加する

add()を使用することで繰り返し処理内で動的にクラスを追加することができます。

例えば、テーブルの奇数列と偶数列によって背景色を変えるコードを作成します。

● index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="main.js"></script>
  <link rel="stylesheet" href="style.css">
  <title>add()で繰り返し処理内で動的にクラスを追加</title>
</head>
<body>
<table border="1">
  <thead>
    <tr>
      <th scope="col">県名</th>
      <th scope="col">首都</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>
</body>
</html>

<!DOCTYPE html>

<head>

<title>add()で繰り返し処理内で動的にクラスを追加</title>

</head>

<body>

<thead>

<tr>

</tr>

</thead>

<tbody>

</tbody>

</table>

</body>

</html>

● style.css

.gainsboro-color {
    background: gainsboro;
}
.white-color {
    background: white;
}
td {
    padding: 20px 60px;
    font-size: 20px;
}

.gainsboro-color {

background: gainsboro;

}

.white-color {

background: white;

}

td {

padding: 20px 60px;

font-size: 20px;

}

● main.js

let prefs = ['東京都', '大阪府', '福岡県', '愛知県', '北海道', '沖縄県']
let offices = ['新宿区', '大阪', '博多', '名古屋', '札幌', '那覇' ] 

window.addEventListener('load', function() {
    let tbody = document.querySelector("tbody")
    for(i = 0; i < 6; i++) {
        let tr = document.createElement('tr')
        tbody.appendChild(tr)
        newEle(prefs[i], offices[i], tbody, tr)

        if((i + 1) % 2 == 0) {
            tbody.children[i].classList.add('gainsboro-color')
        }
        else {
            tbody.children[i].classList.add('white-color')
        }
    }
})

function newEle(pref, office, tbody, tr) {
    let prefEle = document.createElement('td')
    prefEle.textContent = pref
    prefEle.className = "pref"
    tr.appendChild(prefEle)

    let officeEle = document.createElement('td')
    officeEle.textContent = office
    officeEle.className = "office"
    tr.appendChild(officeEle)
}

let prefs = ['東京都', '大阪府', '福岡県', '愛知県', '北海道', '沖縄県']

let offices = ['新宿区', '大阪', '博多', '名古屋', '札幌', '那覇' ]

window.addEventListener('load', function() {

let tbody = document.querySelector("tbody")

for(i = 0; i < 6; i++) {

let tr = document.createElement('tr')

tbody.appendChild(tr)

newEle(prefs[i], offices[i], tbody, tr)

if((i + 1) % 2 == 0) {

tbody.children[i].classList.add('gainsboro-color')

}

else {

tbody.children[i].classList.add('white-color')

}

})

function newEle(pref, office, tbody, tr) {

let prefEle = document.createElement('td')

prefEle.textContent = pref

prefEle.className = "pref"

tr.appendChild(prefEle)

let officeEle = document.createElement('td')

officeEle.textContent = office

officeEle.className = "office"

tr.appendChild(officeEle)

}

実行結果

add()を使用して繰り返し処理内で動的にクラスを追加しています。

そのため、配列内のHTML要素をテーブル要素として表示し、奇数列の場合と偶数列の場合に背景色が変更されています。

jQueryを使用してクラスの追加を行う場合

jQueryを使用してクラスの追加を行う場合はaddClass()を使用します。

addClass()とは要素にクラスを追加するjQueryのメソッドとなります。

そのため、addClass()を使用することでadd()のようにクラスを追加することができます。

● index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="main.js"></script>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
    <title>addClass()でクラスを追加</title>
</head>
<body>
    <p>addClass()でクラスを追加</p>
    <div class="ele"></div>
    <button type="button" class="btn btn1">追加1</button>
    <button type="button" class="btn btn2">追加2</button>
</body>
</html>

<!DOCTYPE html>

<head>

<title>addClass()でクラスを追加</title>

</head>

<body>

<p>addClass()でクラスを追加</p>

</body>

</html>

● style.css

.ele {
    width: 100px;
    height: 100px;
    border: 2px solid black;
    font-size: 12px;
}
.ele-two-times{
    width: 200px;
    height: 200px;
    border: 4px solid black;
    font-size: 24px;
}
.ele-blue {
    background: blue;
    color: blue;
    border: 4px solid blue;
}
.btn {
    margin-top: 10px;
}

.ele {

width: 100px;

height: 100px;

border: 2px solid black;

font-size: 12px;

}

.ele-two-times{

width: 200px;

height: 200px;

border: 4px solid black;

font-size: 24px;

}

.ele-blue {

background: blue;

color: blue;

border: 4px solid blue;

}

.btn {

margin-top: 10px;

}

● main.js

window.addEventListener('load', function() {
  $(".btn1").click(function () {
    $(".ele").addClass("ele-two-times")
  })
  $(".btn2").click(function () {
    $(".ele").addClass("ele-blue")
  })
})

window.addEventListener('load', function() {

$(".btn1").click(function () {

$(".ele").addClass("ele-two-times")

})

$(".btn2").click(function () {

$(".ele").addClass("ele-blue")

})

実行結果

addClass()によってクラスの追加を行っています。

そのため、「追加1」をクリックする要素や文字の大きさが2倍に変化し、「要素2」をクリックすると背景色が青色に変化して表示されます。

classListで使用できるメソッドの一覧

classListにはadd()以外にも使用できるメソッドが存在します。

そのため、ここではclassListで使用できるメソッドの一覧について一部ですがご紹介します。

もし、classListで使用できるメソッドについて全て知りたい場合は下記の記事をご参考ください。

Sossyの助太刀ブログ

9月 15, 2023

【JavaScript】classListとは？使用できるプロパティやメソッドを紹介！

https://sossy-blog.com/useful/10666/

要素のクラスを削除する: remove()

remove()とは要素に付与されているクラスを取り除くメソッドとなります。

● index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="main.js"></script>
  <link rel="stylesheet" href="style.css">
  <title>remove()でクラスを削除</title>
</head>
<body>
  <p>remove()でクラスを削除</p>
  <div class="square weight-size color">ここのクラスを削除</div>
  <button type="button" class=" btn btn1">クラス削除1</button>
  <button type="button" class="btn btn2">クラス削除2</button>
</body>
</html>

<!DOCTYPE html>

<head>

<title>remove()でクラスを削除</title>

</head>

<body>

<p>remove()でクラスを削除</p>

<div class="square weight-size color">ここのクラスを削除</div>

<button type="button" class=" btn btn1">クラス削除1</button>

<button type="button" class="btn btn2">クラス削除2</button>

</body>

</html>

● style.css

window.addEventListener('load', function() {
  let btn1 = document.querySelector('.btn1')
  btn1.addEventListener('click', removeClass1)

  let btn2 = document.querySelector('.btn2')
  btn2.addEventListener('click', removeClass2)
})

function removeClass1() {
  let square = document.querySelector('.square')
  square.classList.remove('weight-size')
}

function removeClass2() {
  let square = document.querySelector('.square')
  square.classList.remove('color')
}

window.addEventListener('load', function() {

let btn1 = document.querySelector('.btn1')

btn1.addEventListener('click', removeClass1)

let btn2 = document.querySelector('.btn2')

btn2.addEventListener('click', removeClass2)

})

function removeClass1() {

let square = document.querySelector('.square')

square.classList.remove('weight-size')

}

function removeClass2() {

let square = document.querySelector('.square')

square.classList.remove('color')

}

● main.js

window.addEventListener('load', function() {
  let btn1 = document.querySelector('.btn1')
  btn1.addEventListener('click', removeClass1)

  let btn2 = document.querySelector('.btn2')
  btn2.addEventListener('click', removeClass2)
})

function removeClass1() {
  let square = document.querySelector('.square')
  square.classList.remove('weight-size')
}

function removeClass2() {
  let square = document.querySelector('.square')
  square.classList.remove('color')
}

window.addEventListener('load', function() {

let btn1 = document.querySelector('.btn1')

btn1.addEventListener('click', removeClass1)

let btn2 = document.querySelector('.btn2')

btn2.addEventListener('click', removeClass2)

})

function removeClass1() {

let square = document.querySelector('.square')

square.classList.remove('weight-size')

}

function removeClass2() {

let square = document.querySelector('.square')

square.classList.remove('color')

}

実行結果

remove()によって要素のクラスを削除しています。

そのため、「クラス削除1」のボタンを押すと「weight-size」クラスが削除され、「クラス削除2」のボタンを押すと「color」クラスが削除されています。

もし、remove()について詳しく知りい場合は下記の記事をご参考ください。

Sossyの助太刀ブログ

9月 23, 2023

【JavaScript】remove()で要素のクラスを削除する！

https://sossy-blog.com/useful/10576/

要素にクラスの有無を切り替える場合：toggle()

toggle()とは要素にクラスを付与したり剥奪したりするメソッドとなります。

● index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <script src="main.js"></script>
  <title>toggle()でクラスの有無の切り替え</title>
</head>
<body>
  <p>toggle()でクラスの有無の切り替え</p>
  <div class="square weight-size">クラスを切り替える</div>
  <button type="button" class=" btn btn1">クラス切替</button>
</body>
</html>

<!DOCTYPE html>

<head>

<title>toggle()でクラスの有無の切り替え</title>

</head>

<body>

<p>toggle()でクラスの有無の切り替え</p>

<div class="square weight-size">クラスを切り替える</div>

<button type="button" class=" btn btn1">クラス切替</button>

</body>

</html>

● style.css

.square {
    width: 250px;
    width: 250px;
    padding: 10px;
    border: 2px solid black;
}
.btn {
    margin-top: 10px;
}
.weight-size {
    font-weight: bold;
    font-size: 20px;
    border: 5px solid black;
}
.color {
    color: white;
    background: green;
}

.square {

width: 250px;

padding: 10px;

border: 2px solid black;

}

.btn {

margin-top: 10px;

}

.weight-size {

font-weight: bold;

font-size: 20px;

border: 5px solid black;

}

.color {

color: white;

background: green;

}

● main.js

window.addEventListener('load', function() {
  let btn = document.querySelector('.btn')
  btn.addEventListener('click', toggleClass)
})
function toggleClass() {
  let square = document.querySelector('.square')
  square.classList.toggle('color')
}

window.addEventListener('load', function() {

let btn = document.querySelector('.btn')

btn.addEventListener('click', toggleClass)

})

function toggleClass() {

let square = document.querySelector('.square')

square.classList.toggle('color')

}

実行結果

toggle()によって要素にクラスの有無を切り替えています。

そのため、「クラス切替」ボタンを押すと「color」クラスが付与され、もう一度押すと「color」クラスが剥奪されています。

もし、toggle()について詳しく知りたい場合は下記の記事をご参考ください。

Sossyの助太刀ブログ

7月 15, 2023

【JavaScript】toggle()で要素のクラスの有無を切り替える！

sossy-blog.com/useful/9521

クラスの存在確認を行う：contains()

contains()とは要素に指定したクラスが付与されているかどうかを確認するメソッドとなります。

そのため、付与されている場合はtrue、付与されていない場合はfalseを返すようになります。

● index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <script src="main.js"></script>
  <title>contains()でクラスの存在確認</title>
</head>
<body>
  <p>contains()でクラスの存在確認</p>
  <div class="square color">クラスの存在確認</div>
  <button type="button" class=" btn btn1">クラス追加1</button>
  <button type="button" class="btn btn2">クラス追加2</button>
</body>
</html>

<!DOCTYPE html>

<head>

<title>contains()でクラスの存在確認</title>

</head>

<body>

<p>contains()でクラスの存在確認</p>

<div class="square color">クラスの存在確認</div>

<button type="button" class=" btn btn1">クラス追加1</button>

<button type="button" class="btn btn2">クラス追加2</button>

</body>

</html>

● style.css

.square {
    width: 250px;
    width: 250px;
    padding: 10px;
    border: 2px solid black;
}
.btn {
    margin-top: 10px;
}
.weight-size {
    font-weight: bold;
    font-size: 20px;
    border: 5px solid black;
}
.color {
    color: white;
    background: blue;
}

.square {

width: 250px;

padding: 10px;

border: 2px solid black;

}

.btn {

margin-top: 10px;

}

.weight-size {

font-weight: bold;

font-size: 20px;

border: 5px solid black;

}

.color {

color: white;

background: blue;

}

● main.js

window.addEventListener('load', function() {
  let btn1 = document.querySelector('.btn1')
  btn1.addEventListener('click', checkClass1)
  let btn2 = document.querySelector('.btn2')
  btn2.addEventListener('click', checkClass2)
})
function checkClass1() {
  let square = document.querySelector('.square')
  if(square.classList.contains('color')) {
    return false
  }
  square.classList.add('color')
}
function checkClass2() {
  let square = document.querySelector('.square')
  if(square.classList.contains('weight-size')) {
    return false
  }
  square.classList.add('weight-size')
}

window.addEventListener('load', function() {

let btn1 = document.querySelector('.btn1')

btn1.addEventListener('click', checkClass1)

let btn2 = document.querySelector('.btn2')

btn2.addEventListener('click', checkClass2)

})

function checkClass1() {

let square = document.querySelector('.square')

if(square.classList.contains('color')) {

return false

}

square.classList.add('color')

}

function checkClass2() {

let square = document.querySelector('.square')

if(square.classList.contains('weight-size')) {

return false

}

square.classList.add('weight-size')

}

実行結果

contains()によってクラスの存在確認を行っています。

「color」クラスは既に付与されているため「クラス追加1」ボタンを押すと、処理は行われません。

しかし、「weight-size」クラスは付与されていないため「クラス追加2」ボタンを押すと、処理が行われます。

contains()を使用することで、上記コードのようにクラスがすでに付与されているのかチェックすることができます。
そのため、add()の重複追加の処理を防止することができます。

まとめ

⚫︎ add()とは要素に指定したクラスを追加するclassListプロパティのメソッドである。

⚫︎ add()を使用するには下記の引数を指定する。
・クラス名(必須)

⚫︎ 別名のクラスを追加する場合にadd()を使用すると、要素に指定したクラスが追加される

⚫︎ 重複するクラスを追加する場合にadd()を使用すると、クラスの追加は行われない

⚫︎ add()で複数のクラス名を一度に追加するには「…(スプレッド演算子)」を使用する

⚫︎ jQueryのaddClass()を使用することでもクラスの追加を行うことができる。

⚫︎　classListプロパティにはadd()以外にも下記のメソッドを使用できる。
・remove()
(指定したクラスを取り除くメソッド)
・cotains()
(指定したクラスが付与されえているかどうか確認するメソッド)
・toggle()
(指定したクラスを付与したり剥奪したりするメソッド)

add()とは

add()の書き方

add()の引数

add()の返り値

add()でクラスの追加を行うサンプルコード

別名のクラスを追加する場合

重複するクラスを追加する場合

複数のクラス名を一度に追加する場合

add()を使用した実際のケース

HTML要素に新しいクラスを追加する

イベント処理中にクラスを追加する

繰り返し処理内で動的にクラスを追加する

jQueryを使用してクラスの追加を行う場合

classListで使用できるメソッドの一覧

要素のクラスを削除する: remove()

要素にクラスの有無を切り替える場合：toggle()

クラスの存在確認を行う：contains()

まとめ

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル