16
15

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

気が付いたらJSスクラッチ界隈が便利になってた件3

Last updated at Posted at 2017-04-16

1.気が付いたらJSスクラッチ界隈が便利になってた件1
2.気が付いたらJSスクラッチ界隈が便利になってた件2
3.気が付いたらJSスクラッチ界隈が便利になってた件3
4.気が付いたらJSスクラッチ界隈が便利になってた件4

#属性の操作が便利になっていた
確かに前回で終わったはずだった。
ところが急遽、第3弾を書くことに。

##属性を取得する
いつものようにattributesを使います。

sample1.html
<a id="human" href="javascript:void(0)" age="30" gender="男">一郎</a>
sample1.js
window.onload = function(){
    var human = document.getElementById("human");
    human.onclick = function(){
        var age = human.attributes["age"].value;
        var gender = human.attributes["gender"].value;
        alert("年齢は" + age + "歳、性別は" + gender);
    };
};

この処理は、getAttributeでも行けます。

sample1.js
window.onload = function(){
    var human = document.getElementById("human");
    human.onclick = function(){
        var age = human.getAttribute("age");
        var gender = human.getAttribute("gender");
        alert("年齢は" + age + "歳、性別は" + gender);
    };
};

##ところが
先日、研修生が書いたコードに、「data-○○」という文字を発見。

これはもしかして、JSスクラッチの課題なのに、何かのJSライブラリを使っちゃったかな?
いや、これは違う!

##dataset
どうやら、HTML5のカスタム属性は
data-○○」で定義して、「dataset」で取得するのが作法とのこと!

具体的には、以下の書き方になります。

sample2.html
<a id="human" href="javascript:void(0)" data-age="30" data-gender="男">一郎</a>
sample2.js
window.onload = function(){
    var human = document.getElementById("human");
    human.onclick = function(){
        var age = human.dataset.age;
        var gender = human.dataset.gender;
        alert("年齢は" + age + "歳、性別は" + gender);
    };
};

##まとめ
確かに、これは便利ですね~。
今までの方法ですと、うっかり「title」属性にデータを埋め込んで、「マウスオーバーで内容が表示されちゃう」事故が起きますし。
今後はdatasetを、積極的に使っていきたいと思います。

※今回の調査で、新たな学びがありましたので、もう1エントリー書けそうです。
というか、私の勉強不足が露呈しているだけですが (^_^;

16
15
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
16
15

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?