SYNCER

SYNCER

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>

デモを開く

デモ

</head><body>までを含めて下さい。

<body> <div id="___body">

</div> <script>...</script> </body> </html>

<style>

</style>

<script>

</script>