Question

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

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

我带有data属性的标记是：

<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（重点是我）：

HTML中的自定义数据属性的名称以data-开头。它必须仅包含字母，数字和以下字符：破折号（-），点（。），冒号（:)，下划线（_）-但不包含任何ASCII大写字母字母（从A到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>

如何使用JavaScript从“数据”属性读取数据

1 个答案: