如何在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>

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

[].forEach.call（document.queryselectoral（'.myimagediv'），函数（elem）{
old_html=elem.innerHTML；
新的html=''；
elem.innerHTML=new_html；
});

新操作元素：

[].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>

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

如何从IMG标记中获取data src属性并将其注入新创建的自定义链接函数中

我应该使用var吗？然后调用它，但我无法理解如何读取数据src并重用它

---

任何帮助都将不胜感激

您只需要像获取其他属性一样获取它

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

</div>

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

警报（document.getElementById（“测试”）.getAttribute（“数据myattr”））；

从@waldemarice编辑：

HtmlElement包含用于获取以数据为前缀的属性的dataset属性-

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

    </div>

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

警报（document.getElementById（“test”）.dataset.myattr）；

---

只需使用image元素的

getAttribute

方法：

[].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>

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

---

示例-如何读取数据-*vanilla JS中的属性：

var elm=document.querySelector（'any-tag'）
var first=elm.dataset.which
var second=elm.dataset.somethingElse//multi-word的驼峰大小写
console.log（第一，第二）

---

var dataSrc=elem.querySelector（'img'）.getAttribute（'data-src'）尝试elem.querySelector（'img'）.dataset。src@Jared史密斯请提交它作为答案，因为这正是我所寻找的！谢谢！：-）@user2513846已完成。@user2513846-查看我的示例-尤其是如何读取多字数据属性，如data-something-else。对于数据属性，有dataset。不需要像其他属性一样阅读它。