1.気が付いたらJSスクラッチ界隈が便利になってた件1
2.気が付いたらJSスクラッチ界隈が便利になってた件2
3.気が付いたらJSスクラッチ界隈が便利になってた件3
4.気が付いたらJSスクラッチ界隈が便利になってた件4
#属性の操作が便利になっていた
確かに前回で終わったはずだった。
ところが急遽、第3弾を書くことに。
##属性を取得する
いつものようにattributesを使います。
<a id="human" href="javascript:void(0)" age="30" gender="男">一郎</a>
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でも行けます。
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」で取得するのが作法とのこと!
具体的には、以下の書き方になります。
<a id="human" href="javascript:void(0)" data-age="30" data-gender="男">一郎</a>
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エントリー書けそうです。
というか、私の勉強不足が露呈しているだけですが (^_^;