データ属性の取得方法（jQuery・JavaScript・CSS）【HTML】
この記事は、最初の投稿から3年以上が経過しています。
最終更新から1210日が経過しています。
「HTMLタグに自由にデータを持たせたい」
「データ属性って何？」
こんな悩みにお答えします｡
この記事では､以下のことがわかります｡
- データ属性とは
- データ属性の取得方法(JavaScript､jQuery､CSS)
記事を読み終えると､データ属性の使い方が理解できるようになります｡
データ属性とは
データ属性(カスタムデータ属性)とは､HTMLタグごとに決まっているデフォルト属性以外に自由に設定できる属性です｡
データ属性を使うとJavaScriptなどでデータの取り扱い(設定､取得)が便利になります｡
古いデータベースのような複雑なWebサイトのソースを見てみると､id､class､nameなど本来の用途とは違った属性を器用に使ってデータを扱っているものもあります｡
データ属性を使えば､器用なデータ操作をせず､さらにデータの内容もわかりやすくデータを取り扱うことができるようになります｡
使い方は､HTMLタグに「data-●●=""」を追加するだけです｡
ひとつだけでなく複数追加できます｡
以下､●●に使えない文字です｡
- 「 xml 」「 XML 」から始めてはならない
- セミコロン(；)を含めてはならない
- 「 A から Z 」(アルファベット大文字)含めてはならない
データ属性でつくる日本語と英語を使った見出しについては､こちらの記事で詳しく解説しています｡
【文字列変換】日本語と英語を使った見出し、タイトル【WordPress】
日本語と英語を使った見出しのコーディング方法を知りたいですが？この記事では、データ属性、疑似要素を使った英語、日本語見出しのコーディング方法、WordPressの場合のスラッグの変換方法を解説しています。。ぜひご覧ください。
データ属性の取得方法
データ属性の簡単な取得方法をそれぞれ紹介します｡
読み込んだ時点でdata-text属性を読み込み､出力しています｡
応用次第ではjsプラグインやデータベース的な操作が必要な場合に役に立ちます｡
JavaScript
JavaScriptを使って以下の出力をしています｡
出力結果
<div id="box1" data-text="JavaScript"></div>
<script>
tag = document.getElementById("box1");
text = tag.getAttribute('data-text');
tag.textContent = text;
</script>
jQuery
jQueryを使って以下の出力をしています｡
やっていることはJavaScriptと同じです｡
出力結果
<div id="box2" data-text="jQuery"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
jQuery(function(){
tag = jQuery("#box2")
text = tag.data("text");
tag.text(text);
});
</script>
CSS
CSSの場合はHTMLを書き換えることができないので､疑似要素:afterに出力しています｡
出力結果
<div id="box3" data-text="CSS"></div>
<style>
#box3:after{
content: attr(data-text);
}
</style>
まとめ
データ属性について紹介しました｡
コーディングだけをしているとあまり使わないものかもしれませんが､複雑なデータを取り扱うサイトや､いろいろなカスタマイズが必要なjsプラグインだとデータ属性がとても役に立ちます｡
