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

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

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

我的带有数据属性的标记是：

<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>

---

即使我在inspector中看到了我的ID属性，结果仍然是“未定义”。

您的数据属性必须是小写的，大多数浏览器都会自动调整它，因此您应该使用以下内容引用它：

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

Per（我的重点）：

HTML中自定义数据属性的名称以data-开头。它必须 仅包含字母、数字和以下字符：破折号（-）， 点（.）、冒号（：）、下划线（417;--但不包括任何ASCII大写字母 字母（A到Z）

console.log（document.querySelector（'.recipe\uu icon'）.parentElement.dataset.ingid）


${formatCount（component.count）}
${component.unit}${component.component}

是否有任何理由使用
数据集
？使用
.getAttribute（'data-ingID'）
怎么样？@briosheje因为这是标准的JavaScript…键将是
ingID
，您的类名有一个带引号的打字错误。您在
class=“recipe\u item data ingID=${component.ing\u id}”中缺少引号。应该是
class=“recipe\uu item”data ingID=“${component.ing\u id}”
无具体原因。我在MDN上看到了它的用法。我也尝试了getAttribute，但结果是“null”
document.querySelector('.recipe__icon').parentElement.dataset.ingid