如何在javascript中獲取查詢選擇器數據屬性？

Question

我有一個自定義 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 並重新使用它。

任何幫助將不勝感激。

Answer 1

只需使用圖像元素的getAttribute方法：

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

Answer 2

示例 - 如何在 vanilla 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" />

Answer 3

你只需要像任何其他屬性一樣獲取它

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

</div>

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

JSFIDDLE

從@waldemarice編輯：

HtmlElement包含數據集屬性以獲取以數據為前綴的屬性-

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

    </div>

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

JSFIDDLE

Answer 4

document.querySelectorAll()示例：

document.querySelectorAll('.className').forEach(elem => console.log(elem.getAttribute('interesting-attribute')));