如何使用 JS 访问 <a> 锚元素的数据属性？

Question

我正在尝试访问锚点的数据属性 (data-elementor-lightbox-title)，以便在移动设备上输出标题。这是我尝试访问页面上所有锚点的代码。

var el = document.querySelectorAll('a.dataset.elementorLightboxTitle');
console.log(el);

这是我尝试访问的具有 data-elementor-lightbox-title 属性的锚点之一的示例：

<a class="e-gallery-item elementor-gallery-item elementor-animated-content" href="https://julianp2.sg-host.com/wp-content/uploads/2021/03/Literaturwurst-hanging_-Autonomie-Gallery.jpg" data-elementor-open-lightbox="yes" data-elementor-lightbox-slideshow="all-19a736f1" data-elementor-lightbox-title="test" data-elementor-lightbox-description="test" style="--item-height:133.333%; --column:1; --items-in-column:0; --percent-height:0%;">

但这只是返回一个节点列表，我无法遍历它来找到标题。

Answer 1

您可以使用 dataset object. Another MDN Link 访问任何元素的 data- 属性。像这样

const a = document.querySelector('a');
console.log(a.dataset); // This returns an object of all the data-attributes of the element written in camelCase

<a data-elementor-open-lightbox="yes" data-elementor-lightbox-slideshow="all-19a736f1" data-elementor-lightbox-title="test" data-elementor-lightbox-description="test">

data- attribute on the HTML elements is written in lowercase, seperated by hyphens (-). Just for the elements to have the same format as other html attributes. For example, data-elementor-open-lightbox`

但是在JS中访问该属性的值，你必须重写camelCase中的属性，即每个单词的第一个字母除了第一个是大写的，其余的都是大写的小写。

例如，HTML data-attribute data-elementor-open-lightbox 将被写为 elementorOpenLightbox （您可以看到数据没有被写入）。在 JS 中你可以简单地运行,

a.dataset.elementorOpenLightbox // And you'll get yes as the return value

如何使用 JS 访问 <a> 锚元素的数据属性？

How can I access the data attribute of an <a> anchor element using JS?

javascript

attributes

elementor