classList toggle

Coddyの「JavaScript DOM メソッド」コースのレッスン 13/13。

JavaScriptのclassList.toggle(class)メソッドは、要素からクラスを追加または削除するためのスイッチのように機能します。例えば：

const element = document.getElementById("container");
element.classList.toggle("fluid-container");

上記のclassList.toggle()メソッドは、containerというIDを持つ要素に対してfluid-containerクラスを切り替えます。

チャレンジ

簡単

トグルボタンとIDを持つdiv、およびそれぞれのスタイリングを含むHTMLとCSSのコードが与えられています。

JavaScriptのみを使用して、ボタンのクリック時にコンテンツに対して dark-mode クラスを切り替えてください。

自分で試してみよう

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <button id="toggleButton">Toggle Dark Mode</button>
        <div id="content">This is some content. Click the button to toggle dark mode.</div>
        <script src="script.js"></script>
    </body>
</html>

JavaScript DOM メソッドのすべてのレッスン

1イントロダクション

イントロダクション Document Object Model

2DOMメソッド I

getElementById 要素のスタイルを変更する getElementsByClassName ループ処理と操作 getElementsByTagName querySelector

3DOMメソッド II

querySelectorAll addEventListener innerHTML createElement と appendChildclassList toggle