HTML5 のカスタム属性の概要-H5 チュートリアル-php.cn

HTML5 のカスタム属性の概要

王林

リリース： 2020-03-21 17:54:24

転載

2686 人が閲覧しました

HTML5 のカスタム属性の概要

定義

H5 では、カスタム属性を設定するために必要な属性を定義するためのプレフィックスとして「data-」が提供されます。

<div id="box1" data-name="Musk"></div>
<div id="box2" data-full-name="Elon Musk"></div>

ログイン後にコピー

(推奨チュートリアル: H5 チュートリアル)

Get

H5 カスタム属性オブジェクトデータセットを使用して取得

let box1 = document.getElementById(&#39;box1&#39;);
let box2 = document.getElementById(&#39;box2&#39;);
 
box1.dataset.name // Musk
box2.dataset.fullName // Elon Musk (驼峰)
 
box1.getAttribute(&#39;data-name&#39;) // Musk
box2.getAttribute(&#39;data-full-name&#39;) // Elon Musk

ログイン後にコピー

設定

let box1 = document.getElementById(&#39;box1&#39;);
let box2 = document.getElementById(&#39;box2&#39;);
 
box1.dataset.name = &#39;马斯克&#39;
box2.setAttribute(&#39;data-full-name&#39;, &#39;埃隆 马斯克&#39;)

ログイン後にコピー

推奨される関連ビデオチュートリアル: html5 ビデオチュートリアル

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