Javascript

カスタムデータ属性を扱ってみよう

HTMLのカスタムデータ属性をJavaScriptから扱う方法について説明していきます。

  • カスタムデータ属性
  • dataset

カスタムデータ属性

・ ボタンをクリックしたら h1をwelcome!と表示されるようにしてみましょう。

・targetNode.textContent を変えてあげれば良いです。welcome!と書いてあげましょう。

・ただ、 h1 に関するものなので、クラス属性と一緒に管理できたら便利です。

・HTML では、 data- から始まっていれば独自の属性を付けられるので、 data-translation 属性を作ってあげて、値をwelcome!にしてあげましょう。

dataset

・こちらの値にアクセスするには、同名のプロパティである data-translation とすれば良いかと思いますが、クラス属性とカスタムデータ属性だけは例外的に違う書き方が違い。dataset.translationとしてあげる必要があります。

・こうしたカスタムデータ属性も JavaScript から扱えるようになっておくと良いでしょう。

-Javascript