本文详解如何通过 `getattribute()` 方法准确获取元素的 `data-*` 自定义属性值，并纠正常见错误（如误用赋值运算符 `=` 代替比较运算符 `===`），结合 dom 操作与条件判断给出可直接运行的实践方案。
在 Web 开发中，data-* 属性是 HTML5 提供的标准方式，用于在 DOM 元素上存储自定义、非渲染相关的数据。JavaScript 可通过 element.getAttribute('data-key') 方法安全读取其值。但初学者常因语法混淆导致逻辑失效——最典型的问题出现在你提供的代码中：
if (value = atr) { ... } // ❌ 错误：这里是赋值，不是比较！该语句将 atr 的值（可能是字符串 "1" 或 null）赋给 value 变量，不仅破坏了原始元素引用，还使条件恒为真（除非 atr 是 null 或 undefined，此时转换为 false），导致 else 分支几乎永不执行，且后续逻辑完全失控。
✅ 正确做法是：使用严格相等比较 === 判断属性是否存在或是否符合预期，并注意属性名拼写一致性（如示例中按钮实际使用的是 data-operator，但原代码误写为 data-clear）：
function showDetails(element) {
const dataNumber = element.getAttribute("data-Number");
const dataOperator = element.getAttribute("data-operator");
if (dataNumber !== null) {
console.log("数字键值：", dataNumber); // 如 "1", "2", "3"
alert(`输入数字：${dataNumber}`);
} else if (dataOperator !== null) {
console.log("运算符：", dataOperator); // 如 "+"
alert(`运算符：${dataOperator}`);
} else {
console.warn("未匹配到任何 data-* 属性");
}
}? 关键注意事项：
立即学习“Java免费学习笔记（深入）”；
- getAttribute() 返回 null（非 undefined）表示属性不存在，因此推荐用 !== null 判断；
- data-Number 中的 N 大写不影响读取（HTML 属性名不区分大小写），但建议统一小写命名（如 data-number）以符合规范；
- 更现代、更语义化的替代方案是使用 dataset API：
const number = element.dataset.number; // 自动转为小驼峰（data-number → number） const operator = element.dataset.operator; // data-operator → operator
它自动处理连字符转换，且返回值为字符串（空字符串而非 null），需注意 dataset 不支持动态添加属性后立即读取（需重新解析）。
? 总结：读取 data 属性的核心是「正确获取 + 准确判断」——避免 = 赋值陷阱，优先使用 === null 或 in 检查，善用 dataset 提升可维护性。调试时可用 console.dir(element) 查看所有属性，确保 HTML 与 JS 属性名完全一致。
