JavascriptでHTMLのdata属性を取得して、活用してみた。

はじめに

こんにちは！株式会社TOKOSのフロントエンドエンジニアのタクヤです!
今回のテーマは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>

詳しくはMDNの公式ドキュメントをご覧ください。

HTMLElement: dataset プロパティ - Web API | MDN

dataset は HTMLElement インターフェイスの読み取り専用プロパティで、要素に設定されたすべてのカスタムデータ属性 (data-*) への読み取り/書き込みアクセスを提供します。これは文字列のマップである (DOMStringMap) で、それぞれの data-* 属性の項目です。

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 rect = e.getBoundingClientRect()
    const winHeight = window.innerHeight
    // 要素がビューポート内に入ったら発火
    if (rect.top <= winHeight && rect.bottom >= 0) {
      window.setTimeout(() => {
        e.classList.add("--active")
      }, Number(e.dataset.time))
    }
  })
})

JavaScriptでは、まず.c-boxクラスを持つ要素をすべて取得します。
そして、getBoundingClientRect()を使って要素が画面内に現れたかを判定し、--activeクラスを付与してアニメーションするようにしています。

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

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

まとめ

今回は、JavaScriptでHTMLのdata属性を取得して、活用する方法について参考例を用いて解説してきました！
data属性をJavaScriptで取得して活用するのはとても簡単です。
使えるようになればコーディングの幅が広がるのでぜひ使ってみてください。

Web制作におけるJavaScriptの基礎固め学習にはこちらの書籍がおすすめです。
是非ご覧になってJavaScriptの知識を深めていきましょう。

Amazon

Amazon

amzn.to