H5データセットの使い方-H5 チュートリアル-php.cn

H5データセットの使い方

php中世界最好的语言

リリース： 2018-03-14 15:15:05

オリジナル

3318 人が閲覧しました

今回はH5データセットの使い方と、H5データセットを使用する際の注意点を紹介します。以下は実際のケースですので見てみましょう。

HTML5 標準では、通常の要素タグに data-* と同様の属性を埋め込んで、簡単なデータアクセスを実現できます。数量に制限はなく、javascriptによって動的に変更することもでき、スタイル設定用のCSSセレクターもサポートしています。これにより、データ属性が特に柔軟かつ強力になります。このような属性を使用すると、より秩序正しく直感的な方法でデータを事前設定または保存できます。もちろん、任意のタグ要素に任意のカスタム属性を追加でき、その値を取得することもできますが、これほど柔軟ではありません。まず、ランダム属性の保存データを見てみましょう。

1. domノードオブジェクトのsetAttributeとgetAttributeを使用します

例:

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>
Document
</title>
 </head>
 <body>
   <span id="music" mtitle="yestoday once more">昨日重现</span>
   <script type="text/javascript">
      var mdoc=document.getElementById(&#39;music&#39;);
 alert(mdoc.getAttribute(&#39;mtitle&#39;));
   </script>
 </body>
</html>

ログイン後にコピー

このコードを実行すると、ページ上でmtitleに対応する値を取得できます。このように書くことも可能ですが、より多くの情報を事前に設定したい場合は、セマンティック属性 data-* を使用する必要があります。たとえば、先ほどの例では、この曲に関するさらに多くのデータを音楽

に挿入したい場合、次のように記述できます:

<span id="music-latch" class="musique"  
data-date="2013"  
data-genre="Electronic"  
data-album="Settle (Deluxe)"  
data-artist="Disclosure"  
data-composer="Howard Lawrence & Guy Lawrence">  
Latch (feat. Sam Smith)  
  </span>

ログイン後にコピー

属性にアクセスするための最初の方法 var を引き続き使用できます。 album = document.getElementById("music-latch ").getAttribute("data-album");

ただし、複数の data-* が発生した場合、このメソッドは比較的ローエンドです。カスタムフィールドを一度に取得したい場合、データ属性がオブジェクトにパッケージ化されている場合、ループを作成する必要があり、非常に面倒です。ただし、Dataset API も利用できます。 2. データセット API を使用してデータセットにアクセスします
.dataset API を使用すると、要素のすべてのデータフィールドをより簡単に取得し、オブジェクトを使用してアクセスとトラバースを容易にすることができます。たとえば、上記の例では、次のように実行できます。

 <script type="text/javascript">
   var mdoc=document.getElementById(&#39;music-latch&#39;);
   var ds=mdoc.dataset;
   alert(ds.date+&#39;--&#39;+ds.album);
   </script>

ログイン後にコピー

現時点では、データにアクセスするときに、「data-」キーワードは必要ありません。を使用して直接アクセスできます。データセット名。これは上記の方法よりも便利です。加えられた変更は要素のデータ属性にリアルタイムで反映されます。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

css3 を使用して 3D 3 次元特殊効果を実現する方法

DOM の使用に関する概要

以上がH5データセットの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。