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

Question

我有一个自定义 JS 函数，它 creates/inject 自定义 link 到页面加载时的所有元素中。

操作前：

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

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

非常感谢任何帮助。

Answer 1

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

<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 2

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

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

Answer 3

示例 - 如何在 vanilla JS 中读取 data-* 属性：

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 4

document.querySelectorAll() 示例：

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

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

how to get query selector data attribute in javascript?

html

javascript

custom-data-attribute