我想为 span 元素设置一个值,但是当我使用 querySelector()
以数据属性(data-job-value)为目标时,我得到错误 span is not defined
let properties = ['name', 'age'];
properties.forEach(property => {
let spanElement = document.querySelector(`.prop[data-${property}]`);
spanElement.textContent = property;
});
<span class="prop" data-name></span>
最佳答案
那是因为您没有匹配“.prop[data-age]”的元素,因此 querySelector
返回 null
let properties = ['name', 'age'];
properties.forEach(property => {
let spanElement = document.querySelector(`.prop[data-${property}]`);
if (spanElement === null) {
console.log(`Error: no matching elements found for query ".prop[data-${property}]"`);
return;
}
spanElement.textContent = property;
});
<span class="prop" data-name></span>
如果有如下匹配的元素就不会报错
let properties = ['name', 'age'];
properties.forEach(property => {
let spanElement = document.querySelector(`.prop[data-${property}]`);
if (spanElement === null) {
console.log(`Error: no matching elements found for query ".prop[data-${property}]"`);
return;
}
spanElement.textContent = property;
});
<span class="prop" data-name></span>
<span class="prop" data-age></span>
关于javascript - 使用数据属性定位元素并动态设置值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56057739/