javascript - 如何使用 JavaScript 从 "data"属性读取数据

Question

我似乎无法通过 JavaScript 读取“data”属性。

使用 MDN 文档，我以“data-ingID”形式设置了数据属性，然后尝试使用 Javascript 和“querySelector”来获取该数据。

我的数据属性标记是:

<li class="recipe__item data-ingID=${ingredient.ing_id}">
            <svg class="recipe__icon">
                <use href="img/icons.svg#icon-check"></use>
            </svg>

            <div class="recipe__count">${formatCount(ingredient.count)}</div>
            <div class="recipe__ingredient">
                <span class="recipe__unit">${ingredient.unit}</span>
                ${ingredient.ingredient}
            </div>
</li>

我正在尝试使用以下代码读取该数据:

console.log(document.querySelector('.recipe__icon').parentElement.dataset.ingID);

即使我在检查器中看到我的 ID 属性，结果也是“未定义”。

Answer 1

您的数据属性必须为小写，大多数浏览器会自动调整它，因此您应该使用以下方式引用它:

document.querySelector('.recipe__icon').parentElement.dataset.ingid

每MDN (强调我的):

The name of a custom data attribute in HTML begins with data-. It must contain only letters, numbers and the following characters: dash (-), dot (.), colon (:), underscore (_) -- but NOT any ASCII capital letters (A to Z).

console.log(document.querySelector('.recipe__icon').parentElement.dataset.ingid);

<ul>
  <li class="recipe__item" data-ingID="${ingredient.ing_id}">
    <svg class="recipe__icon">
                <use href="img/icons.svg#icon-check"></use>
            </svg>

    <div class="recipe__count">${formatCount(ingredient.count)}</div>
    <div class="recipe__ingredient">
      <span class="recipe__unit">${ingredient.unit}</span> ${ingredient.ingredient}
    </div>
  </li>
</ul>