【HTML5】カスタムデータ属性を使ってcss付けした時の備忘録

カスタムデータ属性とは

オリジナルの属性をつけられる
先頭を「data-」にしていれば後は自由に文字入れられる（大文字はだめ）
idとかclassに近い何か

<p data-test="sample">カスタムデータ属性</p>

カスマムデータ属性を使ってcssで色付けする方法

HTML

<p data-test="sample">カスタムデータ属性</p>

CSS

p[data-test="sample"] {
  background: red;
}

カスタムデータ属性を使ってJavaScriptで色付けする方法

HTML

<p data-test="sample">カスタムデータ属性</p>

JavaScript

<p data-test="sample">カスタムデータ属性</p>
<script>
document.querySelector("[data-test='sample']").style.backgroundColor = "red";
</script>

JavaScriptで色付けする方法（複数版）

「querySelector()」は一つしか要素を取得できないから「querySelectorAll()」を使ってループさせる必要がある

HTML

<p data-test="sample">カスタムデータ属性01</p>
<p data-test="sample">カスタムデータ属性02</p>

JavaScript

<script>
var target = document.querySelectorAll("[data-test='sample']");
for(var i = 0; i < target.length; i++) {
    target[i].style.backgroundColor = "red";
}
</script>

カスタムデータ属性を使ってjqueryで色付けする方法

HTML

<p data-test="sample">カスタムデータ属性01</p>
<p data-test="sample">カスタムデータ属性02</p>

JavaScript

<script>
jQuery(function($){
$("p[data-test='sample']").css('background-color','red');
});
</script>

jqueryはこれ一つで同じカスタムデータ属性の値をもつ要素にcssを付与することができる