本文详解如何通过 `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-* 属性");
}
}
? 关键注意事项：
