問題一覧に戻る
中級dom
問題108: classList操作

classList APIによるCSSクラスの操作を学びましょう。classListは要素のclass属性を操作するためのモダンなAPIで、add、remove、toggle、containsなどのメソッドを提供します。古いclassNameプロパティの操作よりも安全で便利で、空白を含むクラス名の扱いや重複追加の防止などが自動的に処理されます。アニメーション、テーマ切り替え、状態管理など、CSSを通じた動的なUI制御に不可欠です。

const element = {
  classList: {
    list: [],
    add: (c) => element.classList.list.push(c),
    remove: (c) => element.classList.list = element.classList.list.filter(x => x !== c),
    toggle: (c) => element.classList.list.includes(c) ? element.classList.remove(c) : element.classList.add(c)
  }
};

element.classList.("active");
console.log(element.classList.list);

element.classList.("active");
element.classList.("hidden");