H5のカスタム属性データの詳細説明 -*-H5 チュートリアル-php.cn

H5のカスタム属性データの詳細説明 -*

Y2J

リリース： 2017-05-24 11:41:23

オリジナル

2735 人が閲覧しました

HTML5 では、カスタムデータ属性 (data-* カスタム属性) と呼ばれる新しい機能が追加されています。 HTML5 では、データを保存するために必要なカスタム属性を設定するためのプレフィックスとして data- を使用できます。もちろん、高度なブラウザーはスクリプトを通じてデータを定義し、アクセスできます。プロジェクトの実践に非常に役立ちます。

例:

コードは次のとおりです:

属性メソッドを使用して data-* カスタム属性の値にアクセスします
data-* カスタム属性の値にアクセスするには、attributes メソッドを使用すると非常に便利です:

コードは次のとおりです:

 // 使用getAttribute获取 data- 属性

  var user = 
document
 . getElementById ( &#39;user&#39; ) ;

  var userName = plant . getAttribute ( &#39;data-uname&#39; ) ; // userName = &#39;脚本之家&#39;

  var userId = plant . getAttribute ( &#39;data-uid&#39; ) ; // userId = &#39;12345&#39;

  // 使用
set
Attribute设置 data- 属性

  user . setAttribute ( &#39;data-site&#39; , &#39;http://www.jb51.net&#39; ) ;

ログイン後にコピー

このメソッドは最新のすべてのブラウザで正常に動作しますが、HTML 5 のカスタム data-* 属性の目的ではありません。それ以外の場合は、以前に使用したカスタム属性と何ら変わりません。例:

コードは次のとおりです。以下の通り:

rreee

この「元の」カスタム属性は、上記の data-* カスタム属性と変わりませんが、ナレッジ属性名が異なります。

dataset 属性は data-* カスタム属性の値にアクセスします

このメソッドは、要素の dataset 属性にアクセスすることによって、data-* カスタム属性の値にアクセスします。データセット属性は HTML5

JavaScript

API の一部であり、選択されたすべての要素のデータ属性の DOMString Map オブジェクトを返すために使用されます。このメソッドを使用する場合、データにアクセスするために data-uid などの完全な属性名を使用する代わりに、data- プレフィックスを削除する必要があります。

もう 1 つ特別な注意を払う必要があるのは、data-属性名にハイフンが含まれている場合 (例: data-

date

-of-birth)、ハイフンは削除され、キャメルケースの名前、つまり以前の属性名に変換されます。変換後は dateOfBirth になるはずです。コードは次のとおりです:

 <p id = "user" uid = "12345" uname = "脚本之家" > </p>

  <script>

  // 使用getAttribute获取 data- 属性

  var user = document . getElementById ( &#39;user&#39; ) ;

  var userName = plant . getAttribute ( &#39;uname&#39; ) ; // userName = &#39;脚本之家&#39;

  var userId = plant . getAttribute ( &#39;uid&#39; ) ; // userId = &#39;12345&#39;

  // 使用setAttribute设置 data- 属性

  user . setAttribute ( &#39;site&#39; , &#39;http://www.jb51.net&#39; ) ;

  </script>

ログイン後にコピー

データ属性を削除したい場合は、 delete . dataset ; または el .dataset ; を実行できます。

見た目は美しいですね（笑）、でも残念ながら、新しいデータセット属性は Chrome 8 以降、Firefox (Gecko) 6.0 以降、Internet Explorer 11 以降、Opera 11.10 以降、Safari 6 以降のブラウザにのみ実装されているため、当面は簡単に実行できるようにするのが最善です。 getAttribute と setAttribute を使用して操作します。

データ - 属性セレクターについて

実際の開発では、カスタムデータ - 属性に基づいて関連する要素を選択できるため、便利であることがわかります。たとえば、要素を選択するには、querySelectorAll

を使用します。

コードは次のとおりです:

//「data-flowering」属性を含むすべての要素を選択します

document . querySelectorAll ( '[data-flowering]' ) ;

// 'data-text-colour' 属性値 red を含むすべての要素を選択します
document . querySelectorAll ( '[data-text-colour="red"]' ) ;

同様に、次の例のように、data- 属性値を通じて対応する要素の CSS スタイルを設定することもできます。

コードは次のとおりです:

 <p id="user" data-id="1234567890" data-name="脚本之家" data-date-of-birth>码头</p>
  <script type="text/javascript">
  var el = document.querySelector(&#39;#user&#39;);
  console.log(el.id); // &#39;user&#39;
  console.log(el.dataset);//一个DOMStringMap
  console.log(el.dataset.id); // &#39;1234567890&#39;
  console.log(el.dataset.name); // &#39;脚本之家&#39;
  console.log(el.dataset.dateOfBirth); // &#39;&#39;
  el.dataset.dateOfBirth = &#39;1985-01-05&#39;; // 设置data-date-of-birth的值.
  console.log(&#39;someDataAttr&#39; in el.dataset);//false
  el.dataset.someDataAttr = &#39;mydata&#39;;
  console.log(&#39;someDataAttr&#39; in el.dataset);//true
  </script>

ログイン後にコピー

【関連おすすめ】

Html5 の無料ビデオチュートリアル。

2 H5 のイベント属性の詳細な説明

3 H5 の 28 の非常に重要な新機能、新技術および新技術の詳細な説明

4 H5 でタイマーを作成するコードのデモ。

5. H5 複数の画像アップロードを完了する詳細な例

以上がH5のカスタム属性データの詳細説明 -*の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。