如何检查元素属性值并设置背景色？解决getAttribute报错问题

报错原因 #

你遇到的Uncaught TypeError: elems.getAttribute is not a function错误，是因为document.querySelectorAll('.card')返回的是NodeList元素集合，而非单个DOM元素。直接在集合上调用getAttribute或访问dataset是无效操作，必须遍历集合中的每个元素进行处理。

需求实现方案 #

检查元素属性值的两种常用方法 #

• 方法1（推荐）：使用dataset属性
  对于以data-开头的自定义属性，可以通过element.dataset访问，属性名需转为驼峰格式（比如data-background-image对应dataset.backgroundImage）。
• 方法2：使用getAttribute
  通用方法，直接传入完整属性名：element.getAttribute('data-background-image')。

修正后的完整代码 #

JavaScript代码

function ifImgIsEmpty() {
    const elems = document.querySelectorAll('.card');
    for (const elem of elems) {
        // 选择以下任意一种方式获取属性值
        const bgValue = elem.dataset.backgroundImage; 
        // const bgValue = elem.getAttribute('data-background-image');
        
        // 判断属性值是否为空
        if (!bgValue) { // 空字符串、null、undefined都会触发此条件
            elem.style.background = 'red';
        } else {
            elem.style.background = 'blue';
        }
    }
}
ifImgIsEmpty();

CSS代码（修正语法错误：display:flex后的冒号改为分号）

.card {
  display: flex;
  border: solid;
  padding: 2rem;
  background: #eee;
}

HTML代码

<a href="" class="card" data-background-image="">01</a>
<a href="" class="card" data-background-image="blue">02</a>
<a href="" class="card" data-background-image="blue">03</a>
<a href="" class="card" data-background-image="">04</a>

关键修正点 #

1. 移除了原代码中对elems.dataset的错误访问，改为遍历每个元素操作。
2. 替换了原代码中错误的elem.value判断，改为直接获取目标data属性值。
3. 优化空值判断逻辑：!bgValue简洁覆盖了空字符串、null、undefined的情况，无需同时判断=== null和=== ''。

内容的提问来源于stack exchange，提问作者Stan Law