選択科目

コース推薦:

定義と用法 HTML DOM Element classList 属性

定義と用法 属性は要素の CSS クラス名を返します。

classList

属性は DOMTokenList を返します。

インスタンス

const list = element.classList;
例 1

実際に試してみる

"myStyle" クラスを要素に追加します:

例 2

const list = element.classList;
"myStyle" クラスを要素から削除します:

実際に試してみる

例 3

"myStyle" のオン/オフを切り替えます:

const list = element.classList;
list.toggle("myStyle");

実際に試してみる

ヒント:ページの下部に更多の例があります。

構文

element.classList

返り値

タイプ 説明
オブジェクト DOMTokenList。要素のクラス名リスト。

注:classList 属性は読み取り専用ですが、以下に示すメソッドを使用して、リストにクラスを追加、切り替え、または削除できます:

classList 属性とメソッド

名前 説明
add() リストにトークンを追加します。
contains() リストにクラスが含まれている場合、true を返します。
entries() リストからキー/値のペアを持つイテレータを返します。
forEach() リストの各トークンに対してコールバック関数を実行します。
item() 指定されたインデックスのトークンを返します。
keys() リストのキーを含むイテレータを返します。
length リストのトークン数を返します。
remove() リストから一つまたは複数のトークンを削除します。
replace() リストのトークンを置き換えます。
supports() トークンが属性がサポートするトークンの一つである場合、true を返します。
toggle() リストのトークン間で切り替えます。
value トークンリストを文字列形式で返します。
values() リストの値を持つイテレータを返します。

さらに多くの例

例 4

要素に複数のクラスを追加します:

element.classList.add("myStyle", "anotherClass", "thirdClass");

実際に試してみる

例 5

要素から複数のクラスを削除します:

element.classList.remove("myStyle", "anotherClass", "thirdClass");

実際に試してみる

例 6

要素のクラス名の数はいくつですか:

let numb = element.classList.length;

実際に試してみる

例 7

「myDIV」要素のクラス名を取得します:

<div id="myDIV" class="myStyle anotherClass thirdClass">
<p>I am myDIV.</p>
</div>
const list = document.getElementById("myDIV").classList;

実際に試してみる

例 8

要素の最初のクラスを取得します:

let className = element.classList.item(0);

実際に試してみる

例 9

要素に「myStyle」クラスがあるかどうか?

let x = element.classList.contains("myStyle");

実際に試してみる

例 10

要素に「myStyle」クラスがある場合、「anotherClass」を削除します:

if (element.classList.contains("mystyle")) {
  element.classList.remove("anotherClass");
}

実際に試してみる

例 11

クラス間で切り替えしてドロップダウンボタンを作成します:

document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

実際に試してみる

例 12

粘性ナビゲーションバーの作成:

// ナビゲーションバーを取得します
const navbar = document.getElementById("navbar");
// ナビゲーションバーのオフセット位置を取得します
const sticky = navbar.offsetTop;
// スクロール位置に到達したら、sticky クラスをナビゲーションバーに追加します
// スクロール位置を離れたら削除します
function myFunction() {
  if (window.pageYOffset  >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

実際に試してみる

ブラウザサポート

すべてのブラウザがサポートしています element.classList

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
サポート 9-11 サポート サポート サポート サポート

関連ページ

CSS チュートリアル:CSS 文法

CSS リファレンスマニュアル:CSS .class セレクタ

DOMTokenList オブジェクト

className 属性

getElementsByClassName() メソッド

HTML DOM Styleオブジェクト