H5 の data-* カスタム属性の使用方法の詳細な説明

今回は、H5 の data-* カスタム属性の使用方法について詳しく説明します。H5 の data-* カスタム属性を使用する際の 注意事項 について、実際のケースを見てみましょう。

1. HTML 要素の特性について

1. HTML 要素にはいくつかの標準的な特性があります:

id ドキュメント内の要素の一意の識別子

要素に関する追加の説明情報。通常、

ツールチップバーが表示されます。

langは、要素のコンテンツの言語コードであり、ほとんど使用されません。

dir言語の方向は、要素のクラス属性に対応します。 ECMAScript クラスの予約語が競合するため、className という名前が付けられます。 2. 特性の操作メソッド:

getAttribute() 関連する特性を取得します。DOM の属性を使用する場合とは異なり、カスタム特性も取得できます。取得する要素;

setAttribute () 関連する属性を設定する;

3. getAttribute() を使用して HTML 要素の属性を取得することと、DOM 要素の属性を直接使用することの違いについて:

例:

var header=document.getElementById('header');
console.log(header.id);//header
console.log(header.getAttribute('id'));//header
console.log(header.title);//test
console.log(header.getAttribute('title'));//test
console.log(header.myTitle);//undefined
console.log(header.getAttribute('myTitle'));//monster1935

in この記事の例では、HTML 要素の標準プロパティとカスタム プロパティを取得する 2 つの方法を示します。

getAttribute() は標準機能とカスタム機能の両方にアクセスできますが、DOM 要素自体の属性を使用して HTML 要素機能にアクセスする場合は、標準機能のみにアクセスできます。

理由:

HTML 要素内の標準属性のみが属性の形式で DOM オブジェクトに追加されます。

特殊なケース:

DOM オブジェクトには対応する属性名がありますが、属性の値は getAttribute() によって返される値と同じではありません。

1. スタイル機能:

DOM オブジェクト属性を使用してスタイルにアクセスするとオブジェクトが返され、getAttribute() メソッドを使用して取得すると CSS テキストが返されます。

2.イベント処理

プログラム (例: onclick):

DOM オブジェクトの属性を使用してアクセスした場合は JavaScript 関数が返され、getAttribute() メソッドで取得した場合は javas コードが返されます。

使用法:

DOM を操作する場合、オブジェクトの属性を使用して取得する場合は、getAttribute() メソッドのみを使用します。

2. Html5 のカスタム属性

1. HTML5 仕様では、レンダリングに関係のない情報を提供するために、カスタム属性にプレフィックス data- を付ける必要があると規定しています。

2. getAttribute() メソッドと setAttribute() メソッドを使用してカスタム属性を操作します。

例:

var user=document.getElementById('user');
//使用attributes方法操作属性
//获取相关属性值
var name=user.getAttribute('data-name');
console.log(name)//monster1935
var age = user.getAttribute('data-age');
console.log(age);//123
//设置相关属性值
user.setAttribute('data-sex','male');
console.log(user.getAttribute('data-sex'));//male

上の例は、getAttribute() メソッドと setAttribute() メソッドを使用して HTML 要素のカスタム属性を操作する方法を示しています。

3. データセットを使用してカスタム属性を操作する

例:

var el=document.querySelector('#user');
console.log(el.id);
console.log(el.dataset); //返回的是一个DomStringMap对象
console.log(el.dataset.name);
console.log(el.dataset.age);
// 设置相关属性
el.dataset.home="shandong";
console.log(el.dataset);
// 删除相关属性
// delete el.dataset.home;
el.dataset.home = null;
console.log(el.dataset);

上の例は、データセット属性を使用してカスタム属性を操作することを示しています。データセット属性の値は、名前と値のペアのマップである DOMStringMap の例です。このマッピングでは、data-name 形式の各属性に対応する属性があります。違いは、属性名に data- プレフィックスがないことです。 (たとえば、カスタム属性が data-name の場合、マッピング内の対応する属性は name です)

もう 1 つの注意点は、データ属性名にハイフンが含まれている場合です (例: data-date-of-birth)。 , マッピング内の対応する属性は dateOfBirth で、表示のために対応するキャメル ケース形式に変換されます。

4.データセット属性との互換性の問題

5.データ

属性セレクターを使用する

1.获取相关DOM元素

var elem=document.querySelectorAll("[data-name='monster1935']");

2.设置相关css样式

<style>
  p{
    width:100px;
    height:200px;
    margin:20px;
  }
  p[data-name="monster"]{
    background-color: green;
  }
  p[data-name="monster1935"]{
    background-color: red
  }
</style>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

HTML文档中嵌入JS方法总结

React Form组件封装步骤详解

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