javascript - 如何在 javascript 中获取查询选择器数据属性？

Question

我有一个自定义 JS 函数，它在页面加载时创建/注入(inject)一个自定义链接到页面中的所有元素。

操作前:

<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 属性并将其注入(inject)到我新创建的自定义链接函数中？

我应该使用 var 吗？然后调用它，但我无法掌握如何读取数据源并重新使用它。

如有任何帮助，我们将不胜感激。

Answer 1

只需使用图像元素的getAttribute 方法即可:

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