javascript - 如何查找元素的属性值

Question

这是一段代码

<span class="balance themecolor" data-balance="2800">

我正在寻找一种方法来提取 data-balance 的值并将其设置为变量 x，但我完全不知道该怎么做。我知道 .val() 的存在，但我不知道是否可以将其应用于此代码。我正在寻找一个单行长的解决方案。

Answer 1

如果您使用 jQuery(正如您提到的 .val()):

var x = $("[data-balance]").attr("data-balance");

或者如果您不是:

var x = document.querySelector("[data-balance]").getAttribute("data-balance");

在这两种情况下，[data-balance] 都是元素的 CSS 选择器；根据需要进行调整。例如，对于该元素，并假设其任何一个类都没有其他元素，您可以使用 .balance、.themecolor 甚至 .balance.themecolor .

jQuery 将找到与选择器匹配的所有元素(如果这是一个问题，您可以更改它，通常不是)，但随后只为您提供第一个元素的属性值。

querySelector 将在第一个查询处停止。如果您想找到所有这些并获取列表，请使用 querySelectorAll (然后对其进行索引以获取单个列表)。