本文详解如何修复 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() 安全遍历。
以下是修正后的完整实现：
<style>
.example {
width: 60px;
height: 60px;
margin: 8px;
background-color: #4a90e2;
border-radius: 50%; /* 实现圆形视觉效果 */
transition: transform 0.3s ease; /* 添加平滑过渡 */
}
.button {
padding: 10px 20px;
background-color: #27ae60;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
margin-bottom: 16px;
}
</style>
<div onclick="RotateDiv(this)" class="button">点击旋转所有形状</div>
<div class="example s1"></div>
<div class="example s2"></div>
<div class="example s3"></div>
<div class="example s4"></div>
<script>
let Degree = 0;
function RotateDiv() {
const shapes = document.querySelectorAll('.example');
// 每次点击统一增加 10°，确保所有元素同步旋转
Degree += 10;
shapes.forEach(shape => {
shape.style.transform = `rotate(${Degree}deg)`;
});
}
</script>✅ 关键修正点总结：
- ✅ 将 deg 替换为已声明的 Degree 变量；
- ✅ 使用 style.transform = 'rotate(...)' 替代无效的 style.rotate；
- ✅ 用 querySelectorAll('.example') 精准选取目标元素，避免污染全局 <div>；
- ✅ 将 Degree += 10 移至循环外，保证所有元素应用同一旋转角度（若需各自独立累加，才放入循环内）；
- ✅ 添加 transition 实现流畅动画，提升用户体验。
⚠️ 注意事项：
- 若需重置旋转状态，可在函数开头添加 if (Degree >= 360) Degree = 0;；
- 在真实项目中，建议使用 CSS 动画或 requestAnimationFrame 替代直接操作 style.transform，以获得更高性能；
- 避免在 HTML 中内联 onclick，推荐使用 addEventListener 进行解耦（例如：document.querySelector('.button').addEventListener('click', RotateDiv)）。
通过以上优化，即可稳定、可维护地实现点击触发多元素同步旋转的效果。
