ロード時にページ内のすべての要素にカスタムリンクを作成/挿入するカスタムJS関数があります。
操作前:
<div class="myimagediv">
<img class="img-tag" src="#" data-src="alternative content I need" alt="">
</div>
そして今、このカスタム関数は要素を操作します:
[].forEach.call(document.querySelectorAll('.myimagediv'), function(elem) {
old_html = elem.innerHTML;
new_html = '<a class="customlink" href="' + elem.querySelector('img').src + '">' + old_html + '</a>';
elem.innerHTML = new_html;
});
新しく操作する要素:
<div class="myimagediv">
<a class="customlink" href="this should be the content of my data-src" title="">
<img class="img-tag" src="#" data-src="alternative content I need" alt="">
</a>
</div>
IMGタグからdata-src属性を取得して、新しく作成したカスタムリンク関数に挿入するにはどうすればよいですか?
私はvarを使うべきですか?それを呼び出しますが、data-srcを読み取って再利用する方法がわかりません。
どんな助けでも大歓迎です。
画像要素のgetAttribute
メソッドを使用するだけです。
var dataSrc = elem.querySelector('img').getAttribute('data-src');
例-バニラJSでdata- * attrsを読み取る方法:
var Elm = document.querySelector('any-tag')
var first = Elm.dataset.whatever
var second = Elm.dataset.somethingElse // camel case for multi-Word
console.log(first, second)
<any-tag data-whatever="value1" data-something-else="value2" />
他の属性と同じように取得するだけです
<div id="test" data-myattr="toto">
</div>
alert(document.getElementById("test").getAttribute("data-myattr"));
EDIT FROM@ waldemarice:
HtmlElementには、データが前に付いている属性を取得するためのdatasetプロパティが含まれています-
<div id="test" data-myattr="toto">
</div>
alert(document.getElementById("test").dataset.myattr);