JavascriptでHTMLのdata属性を取得して、活用する方法

はじめに
- 対象となる方
data属性とは
実装
まとめ

はじめに

こんにちは。エンジニア（コーディング）のタクヤです!
今回のテーマはJavascriptでHTMLのdata属性を取得して、活用してみた。です。

data属性はCSSやJavascriptから直接取得や参照することができるため、CSSとJavascriptを簡単に連動させることができたり、DOM操作の幅がより広がります。
具体例として、「スクロールすると要素がふわっと下から順番に出てくるアニメーション」を実装しながら簡単に解説していきます。

対象となる方

HTMLやCSS、Javascriptを勉強中の方
Web制作でコーディングをしている方
JavascriptでHTMLのdata属性を取得してみたい方

data属性とは

data属性とは、正式にはカスタムデータ属性といい、HTMLの要素に任意の名前をつけたデータを持たせることができるものです。
冒頭でもお話したように、CSSやjavascriptからこのデータを取得したり参照できます。

書き方は「data-*」といった形で、必ずdata-から始まります。
「data-en」や「data-name」、「data-number」のような感じです。

<div class="c-box" data-number="1" data-time="500"></div>

参考
data属性https://developer.mozilla.org

実装

それでは実装に移っていきます。
具体例のスクロールすると要素がふわっと下から順番に出てくるアニメーションを実装するなかで、data属性を使っていきます。

<p class="c-description">↓下にスクロールしてください↓</p>
<div class="l-container">
  <div class="c-box" data-number="1" data-time="500"></div>
  <div class="c-box" data-number="2" data-time="700"></div>
  <div class="c-box" data-number="3" data-time="900"></div>
</div>

HTMLはこんな感じです。
３つ並んでるdivを作成し、クラス名とdata属性を与えます。
CSSでテキストを指定するための data-number
アニメーションに関する時間を指定するためにJavascriptで取得したいので data-time
をそれぞれ指定します。

.l-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 200px;
}

.c-box {
  align-items: center;
  aspect-ratio: 1 / 1;
  background-color: #4eb99d;
  display: flex;
  justify-content: center;
  margin: 5px;
  min-width: 300px;
  opacity: 0;
  position: relative;
  transform: translateY(100px);
}

.c-box::before {
  content: attr(data-number);
  font-size: 40px;
  color: #fafafa;
}

.c-box.--active {
  opacity: 1;
  transform: translateY(0);
  transition: 1s;
}

.c-description {
  align-items: center;
  display: flex;
  height: 100vh;
  justify-content: center;
  margin-bottom: 200px;
  width: 100vw;
}

HTMLのdata属性のdata-numberで設定した値を、CSSの疑似要素（::before）のcontentにアクセスしています。

書き方は、attr(data-number)　で、
「そのCSSセレクタがあたっている要素のdata-number属性を参照する」
といった具合です。
これでそれぞれの要素の上に、data-numberで指定した数字が表示されるようになります。

window.addEventListener("scroll", () => {
  document.querySelectorAll(".c-box").forEach((e) => {
    const absoluteTop = e.getBoundingClientRect().top;
    const relativeTop = window.pageYOffset;
    const winHeight = window.innerHeight;
    if (absoluteTop <= relativeTop + winHeight) { window.setTimeout(() => {
        e.classList.add("--active");
      }, e.dataset.time);
    }
  });
});

javascriptでは、まずc-boxクラスを持つ要素をすべて取得します。
そして、それぞれの要素が画面内に現れたら、–activceクラスを付与してアニメーションするようにしています。

その際に、HTMLで指定したdata-timeというdata属性の数値をJavascriptで取得して、てアニメーションの開始時間に差が生まれるようにしています。
書き方は、[オブジェクト].dataset.time です。

これで想定通りのスクロールアニメーションが実装できました。