HTML の data 属性を使うと、JavaScript で値を交換することが出来ます。この記事では data 属性の指定方法と、css で属性をセレクト、取得する方法、JavaScript で値を取得、変更する方法を確認します。
data 属性の指定方法
<div id="hello" data-hello="こんにちは"></div>data-*
data-任意の文字列で定義します。任意の文字列には、ルールがあります。
- xml は使えない
- セミコロン（；）と大文字は使えない
CSSでdata属性を取得
css では data 属性に限らず、属性を選択、値を取得することが出来ます。
<style>
[data-hello-japanese] {
width: 200px;
height: 100px;
background: #fff;
position: relative;
}
[data-hello-japanese='こんにちは']:before {
content: attr(data-hello-japanese);
position: absolute;
color: #000;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>2: [data属性]
9: [data属性=’値’] で選択することが出来ます。
10: attr() 関数で属性値を取得することができ、擬似要素で使用すると、元になった要素の属性値を取得することが出来ます。
JavaScriptでdata属性を取得、変更
data属性を取得、変更するには dataset を使う方法と、getAttribute を使う方法があります。
dataset を使って取得、変更
dataset を使う場合には、data属性から接頭辞 (data-) を除いてキャメルケース(ダッシュを削除して先の文字を大文字にする)で指定します。
data-hello-japanese の場合は、helloJapanese となり以下のように取得することが出来ます。
dataset.helloJapanese
dataset['helloJapanese']
dataset では、 2 パターンの取得方法があります。
document.querySelector('[data-hello-japanese]').dataset.helloJapanese;
document.querySelector('[data-hello-japanese]').dataset['helloJapanese'];変更
document.querySelector('[data-hello-japanese]').dataset['helloJapanese'] = 'hello';値を代入することで、変更、削除が出来ます。
getAttributeで取得
getAttribute では data属性に限らず他の属性も取得、変更することが出来ます。
getAttribute('data-hello-japanese')
document.querySelector('[data-hello-japanese]').getAttribute('data-hello-japanese');変更
setAttribute('data-hello-japanese', 'hello')
document.querySelector('[data-hello-japanese]').setAttribute('data-hello-japanese', 'hello');以上 data属性の指定方法と取得方法でした。
全体のコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>layout</title>
</head>
<body>
<main>
<section>
<div class="container">
<div id="hello" data-hello-japanese="こんにちは"></div>
</div>
</section>
</main>
<style>
[data-hello-japanese] {
width: 200px;
height: 100px;
background: #fff;
position: relative;
}
[data-hello-japanese='こんにちは']:before {
content: attr(data-hello-japanese);
position: absolute;
color: #000;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<script>
document.querySelector('[data-hello-japanese]').dataset.helloJapanese;
document.querySelector('[data-hello-japanese]').dataset['helloJapanese'];
document.querySelector('[data-hello-japanese]').getAttribute('data-hello-japanese');
// document.querySelector('[data-hello-japanese]').dataset['helloJapanese'] = 'hello';
// document.querySelector('[data-hello-japanese]').setAttribute('data-hello-japanese', 'hello');
console.log(document.querySelector(`[data-hello-japanese]`).getAttribute('data-hello-japanese'));
</script>
<script src="script.js"></script>
</body>
</html>
