如何在javascript中查询数据属性值(没有jquery)

How to query a data attribute value in javascript (no jquery)?

本文关键字：没有 jquery 数据属性 查询 javascript      更新时间：2023-09-26

如果我有一个由ul's(行)和li's(单元格)组成的网格，我想根据ul和li的数据属性值获得一个特定的单元格:

document.querySelectorAll(div.grid ul[data-${this.y}] li[data-${this.x}]'_

当我在MDN上搜索时，我只发现如何根据data attribute检索html element，但不是它的值。

任何指示将不胜感激-也没有jQuery请。

您可以使用字符串插值并使其工作。

你可以这样做。

document.addEventListener('DOMContentLoaded', function() {
  let ulData = 2,
    liData = 4;
  document.querySelector(`div.grid ul[data="${ulData}"] li[data="${liData}"]`).classList.add("red");
});
.red {
  color: red;
}
<div class="grid">
  <ul data="2">
    <li data="1">
      One
    </li>
    <li data="2">
      Two
    </li>
    <li data="3">
      Three
    </li>
    <li data="4">
      Four
    </li>
    <li data="5">
      Five
    </li>
  </ul>
</div>

相关文章：