選択科目
- 前のページ children
- 次のページ className
- 上一层に戻る HTML DOM Elements オブジェクト
コース推薦:
定義と用法
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 | サポート | サポート | サポート | サポート |
- 前のページ children
- 次のページ className
- 上一层に戻る HTML DOM Elements オブジェクト