HTML5 の classList 属性

巴扎黑

リリース： 2017-03-19 11:56:10

オリジナル

1863 人が閲覧しました

[はじめに] HTML5 に新しく追加されたセレクター、つまり querySelector()、querySelectorAll()、getElementsByClassName() を紹介しました。これら 3 つはそれぞれ独自の機能を備えており、必要に応じて HTML5 の実戦や分析で関連するコンテンツを読み込むことができます。今日は、HTML5 に新しく追加されたセレクター、つまり querySelector()、querySelectorAll()、getElementsByClassName() を紹介しました。これら 3 つはそれぞれ独自の機能を備えており、必要に応じて HTML5 の実戦や分析で関連するコンテンツを読み込むことができます。今回はclassList属性について紹介します。

classList 属性は具体的に何をするのでしょうか? ここでは classList をそのままにしておきます。複数のクラス名を持つ要素の中から、どのようにしてクラス名の 1 つを削除するかという問題を考え、Menglong は頭を悩ませ、最終的にそれを達成する方法を考え出しました。 li、meng、long の 3 つのクラス名のうち、meng を削除します。コードは以下の通りです

HTMLコード

<p class="li meng long">梦龙小站</p>

ログイン後にコピー

//获取要删除类名meng的p  
var p = document.getElementsByTagName("p")[0];  
  
//获取类名字符串并拆分成数组  
var allClassName = p.className.split(" ");  
  
//找到要删除的类名  
var i, len,   
    pos = -1;  
  
for(i=0, len = allClassName.length; i < len; i++){  
    if(allClassName[i] == "meng"){  
        pos = i;  
        break;  
    }  
}  
  
//删除类名  
allClassName.splice(pos, 1);  
  
alert(allClassName) //li,long  
  
//将其余的类名拼成字符串并重新添加到元素的类名中  
p.className = allClassName.join(" ");

ログイン後にコピー

プレビュー効果

HTML5 の classList 属性

要素クラス名から「meng」を削除するには, 上記のコードはすべて必須です。同様のアルゴリズムを使用してクラス名を置換し、クラス名が要素に含まれているかどうかを確認します。クラス名を追加する場合は、文字列を結合することで完了できますが、操作を簡素化するために、同じクラス名が複数回追加されないことを検出を通じて確認する必要があります。クラス名を削除するには、まず既存のクラス名を取得し、クラス名を削除する場所を見つけて削除する必要があります。

上記のメソッドから、単純な削除機能を実装するには、数行のコードを記述する必要があることがわかります。数行のコードを書きたくない場合は、ライブラリを導入してメソッドを使用する必要があります。図書館で。 HTML5 では、それほど心配する必要はありません。HTML5 の classList 属性を使用して、これらの手順を完了できます。この classList 属性は、新しいコレクション型 DOMTokenList のインスタンスです。他の DOM コレクションと同様です。 DOMTokenList には、含まれる要素の数を示す length 属性があります。各要素を取得するには、item() メソッドまたは角かっこ構文を使用できます。さらに、この新しいタイプに対して定義されたメソッドを以下に示します。

1.remove(value)

remove(value)メソッドは、指定された文字列をリストから削除することを意味します。小さな例は次のとおりです。

HTML コード

<p class="li meng long">梦龙小站</p>

ログイン後にコピー

JavaScript コード

//获取要删除类名meng的p  
var p = document.getElementsByTagName("p")[0];  
  
alert(p.classList)  //li meng long  
  
p.classList.remove("meng")   
  
alert("p.className: " + p.className)  //p.className: li long

ログイン後にコピー

プレビュー効果

HTML5 の classList 属性

2. contains(value)

contains(value) メソッドリストが存在するかどうかを示します。存在する場合は "true" を返し、そうでない場合は "false" を返します。

HTML コード

<p class="li meng long">梦龙小站</p>

ログイン後にコピー

3. add(value)

add(value)メソッドは、リスト内の文字列をリストに追加することを意味します。すでに存在する場合は追加されません。小さな例は次のとおりです。

HTML コード

//获取要删除类名meng的p  
var p = document.getElementsByTagName("p")[0];  
  
alert(p.classList.contains("meng")) //true  
  
alert(p.classList.contains("menglong")) //false

ログイン後にコピー

JavaScript コード

<p class="li meng long">梦龙小站</p>

ログイン後にコピー

プレビュー効果

4. toggle(value)

HTML5 の classList 属性

toggle(value) メソッド、リストにある場合指定された値がすでに存在する場合はそれを削除し、指定された値がリストにない場合は追加します。小さな例は次のとおりです。

HTML コード

//添加类名 menglong  
  
//获取要删除类名meng的p  
var p = document.getElementsByTagName("p")[0];  
  
p.classList.add("menglong");  
  
alert("p.className: " + p.className)  //p.className: li meng long menglong

ログイン後にコピー

JavaScript コード

<p class="li meng long">梦龙小站</p>  
梦龙小站

ログイン後にコピー

プレビュー効果

HTML5 の classList 属性 classList に関する小さな例すでにあなたにそれを提示しました、そして小さな例を通じて、これらの小さなメソッドを明確に示して説明します。 classList では、すべてのクラス名を削除するか、要素の class 属性を完全に書き換える必要がない限り、className 属性は不要となり、実用的なメソッドが多数付属しています。 classList 属性をサポートするブラウザには、Firefox 3.6 以降および Chrome が含まれます。

ここではHTML5の実戦と分析のclassList属性を紹介します。少しずつの積み重ねが明日の成功になります。1日で少しずつHTML5を学べば、いつか必ず成功します。 Menglong Station をサポートしていただきありがとうございます。HTML5 に関する最新情報については、HTML5 の実践と分析に関する Menglong Station の最新情報にご注目ください。

以上がHTML5 の classList 属性の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。