web-dev-qa-db-ja.com

JavaScriptでクエリセレクタデータ属性を取得する方法

ロード時にページ内のすべての要素にカスタムリンクを作成/挿入するカスタム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を読み取って再利用する方法がわかりません。

どんな助けでも大歓迎です。

javascripthtmlcustom-data-attribute
7
user2513846

画像要素のgetAttributeメソッドを使用するだけです。

var dataSrc = elem.querySelector('img').getAttribute('data-src');
9
Jared Smith

例-バニラ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" />
3
user6748331

他の属性と同じように取得するだけです

<div id="test" data-myattr="toto">

</div>

alert(document.getElementById("test").getAttribute("data-myattr"));

[〜＃〜] jsfiddle [〜＃〜]

EDIT FROM@ waldemarice：

HtmlElementには、データが前に付いている属性を取得するためのdatasetプロパティが含まれています-

    <div id="test" data-myattr="toto">

    </div>

  alert(document.getElementById("test").dataset.myattr);

[〜＃〜] jsfiddle [〜＃〜]

2
OrcusZ