data-属性の使用例（CSSやjavascriptからの参照）

data-属性の使用例、CSSやjavascriptからの参照方法を紹介します。

htmlにdata-属性を設定することで、CSSでのスタイル設定やjavascriptからの操作がしやすくなります。

CSSでの参照

p::before {
  content: attr(data-○○○);
  color: red;
}

p[data-△△△="□□□"] {
  color: blue;
}

2行目 attr(data-***)

attr(data-***)を使用して値を参照できます。例ではdata-***に設定されている値が疑似要素のテキストとして表示されます。

6行目 属性セレクタ

属性セレクタとして[data-***="***"]の形で指定できます。

javascriptでの参照

<p class="test" data-text-type="sample">テキスト</p>

const test = document.querySelector(".test");
console.log(test.dataset.textType); // sample が出力
console.log(test.getAttribute("data-text-type")); // こちらでもOK

2行目 要素.dataset.***

要素.dataset.***でdata-属性を参照できます。

3行目 getAttribute(“data-***”)

getAttribute()を使用してdata-属性にアクセスすることもできます。

デモ

data-属性を使用して簡単なタブ切り替えを実装しました。

See the Pen Untitled by yoshi (@mikanbako) on CodePen.