本文详解如何修复 javascript 中因变量名错误和 css 属性误用导致的旋转失效问题，提供可复用的 dom 元素批量旋转方案，并强调 `transform: rotate()` 的正确用法与状态管理要点。
在前端交互开发中，常需通过点击触发图形旋转动画。但初学者易陷入两个典型错误：一是混淆变量名（如将 Degree 写成未声明的 deg），二是误用非标准 CSS 属性（如 style.rotate 而非 style.transform）。上述代码中，ReferenceError: deg is not defined 正源于此——deg 从未声明，而真正累加的是 Degree 变量。
此外，document.getElementsByTagName('div') 返回的是 HTMLCollection，使用 for...in 遍历会意外包含原型属性（如 length、item 等），导致运行时错误或不可预期行为。更可靠的方式是使用 document.querySelectorAll('.example') 获取 NodeList，并配合 forEach() 安全遍历。
以下是修正后的完整实现：
✅ 关键修正点总结：
- ✅ 将 deg 替换为已声明的 Degree 变量；
- ✅ 使用 style.transform = 'rotate(...)' 替代无效的 style.rotate；
- ✅ 用 querySelectorAll('.example') 精准选取目标元素，避免污染全局 ；
- ✅ 将 Degree += 10 移至循环外，保证所有元素应用同一旋转角度（若需各自独立累加，才放入循环内）；
- ✅ 添加 transition 实现流畅动画，提升用户体验。
⚠️ 注意事项：
- 若需重置旋转状态，可在函数开头添加 if (Degree >= 360) Degree = 0;；
- 在真实项目中，建议使用 CSS 动画或 requestAnimationFrame 替代直接操作 style.transform，以获得更高性能；
- 避免在 HTML 中内联 onclick，推荐使用 addEventListener 进行解耦（例如：document.querySelector('.button').addEventListener('click', RotateDiv)）。
通过以上优化，即可稳定、可维护地实现点击触发多元素同步旋转的效果。
