data-*属性 - カスタムデータ属性
公開日:
data-*属性は、要素に任意のキーと値を設定するための属性です。主にJavaScriptでDOMを操作するための属性です。
説明
data-*属性は、要素に任意のキーと値を付けるための属性です。キー名は、data-
の後に続けます。例えば、下記は、colorというキーと、その値を付けたものです。
HTML
<!-- color=redというデータを付けた -->
<p data-color="red">テキスト</p>
<!-- color=blueというデータを付けた -->
<p data-color="blue">テキスト</p>
この属性は表示には影響しません。主にJavaScriptでの利用を想定したデータとなります。付けた値をどのように利用するかは開発者の自由です。
JavaScript
// data-colorという属性を持つ要素を取得
var elements = document.querySelectorAll( "[data-color]" ) ;
// それぞれの要素に対する処理
for ( var i=elements.length; i--; ) {
// data-colorの値を取得
var color = elements[i].getAttribute( "data-color" ) ;
// 文字色を、値の色に変更
elements[i].style.color = color ;
}
サンプルコード
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>【デモ】data-*属性 - カスタムデータ属性</title>
<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Global_attribute/data/">
<style>
body {
background-color: #fff ;
}
</style>
</head>
<body>
<p>data-*属性は、要素に任意のキーと値を付けるための属性です。</p>
<h2>文字色をJavaScriptで変更</h2>
<p data-color="red">テキスト</p>
<p data-color="blue">テキスト</p>
<script>
// data-colorという属性を持つ要素を取得
var elements = document.querySelectorAll( "[data-color]" ) ;
// それぞれの要素に対する処理
for ( var i=elements.length; i--; ) {
// data-colorの値を取得
var color = elements[i].getAttribute( "data-color" ) ;
// 文字色を、値の色に変更
elements[i].style.color = color ;
}
</script>
</body>
</html>