ホームページ > 記事 > ウェブフロントエンド > HTML5 カスタム属性データ - * 詳細な紹介と JS 操作の例_html5 チュートリアル スキル
HTML5 カスタム属性データ - * 詳細な紹介と JS 操作の例_html5 チュートリアル スキル
- WBOYオリジナル
- 2016-05-16 15:48:121954ブラウズ
もちろん、定義とデータ アクセスは、高度なブラウザのスクリプトを通じて実行できます。プロジェクトの実践に非常に役立ちます。
例:
属性メソッドを使用して data-* カスタム属性の値にアクセスします
data-* カスタム属性の値にアクセスするには、属性メソッドを使用すると非常に便利です:
// getAttribute を使用してデータ属性を取得します
var user = document . getElementById ( 'user' ) ;
var userName = plant . getAttribute ( 'data-uname' ) // userName = 'スクリプト ホーム'
; var userId = plant . getAttribute ( 'data-uid' ) // userId = '12345'
;
// setAttribute を使用してデータ属性を設定します
user . setAttribute ( 'data-site' , 'http://www.jb51.net' ) ;
このメソッドは最新のすべてのブラウザで正常に動作しますが、HTML 5 のカスタム data-* 属性の目的ではありません。それ以外の場合は、以前に使用したカスタム属性と何ら変わりません。たとえば、
<スクリプト>
// getAttribute を使用してデータ属性を取得します
var user = document . getElementById ( 'user' ) ;
var userName = plant . getAttribute ( 'uname' ) // userName = 'スクリプト ホーム'
; var userId = plant . getAttribute ( 'uid' ) // userId = '12345'
;
// setAttribute を使用してデータ属性を設定します
ユーザー . setAttribute ( 'サイト' , 'http://www.jb51.net' ) ;
この「元の」カスタム属性は、上記の data-* カスタム属性と変わりませんが、ナレッジ属性名が異なります。
データセット属性アクセス データ - *カスタム属性値
このメソッドは、要素のデータセット属性にアクセスすることで、data-* カスタム属性の値にアクセスします。 dataset 属性は HTML5 JavaScript API の一部であり、選択されたすべての要素の data- 属性を含む DOMStringMap オブジェクトを返すために使用されます。
このメソッドを使用する場合、data-uid などの完全な属性名を使用してデータにアクセスするのではなく、data- プレフィックスを削除する必要があります。
もう 1 つ注意すべき点は、data-属性名にハイフンが含まれている場合 (例: data-date-of-birth)、ハイフンが削除され、以前の属性名がキャメルケースの名前に変換されることです。それは dateOfBirth である必要があります。
<スクリプトタイプ="text/javascript">
var el = document.querySelector('#user');
console.log(el.id); // 'ユーザー'
console.log(el.dataset);//DOMStringMap
console.log(el.dataset.id) // '1234567890'
console.log(el.dataset.name); // 'スクリプト ホーム'
console.log(el.dataset.dateOfBirth); // ''
el.dataset.dateOfBirth = '1985-01-05' // data-date-of-birth.
の値を設定します。 console.log('someDataAttr' in el.dataset);//false
el.dataset.someDataAttr = 'mydata';
console.log('someDataAttr' in el.dataset);//true
データ属性を削除したい場合は、 delete el . 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 スタイルを設定することもできます。
<スタイル タイプ ="text/css">
.user {
幅: 256px ;
高さ: 200px ;
}
.user[data-name='フェイウェン'] {
色: ブラウン
}
.user[データ名='css'] {
カラー：レッド
}