未通过DOM选择元素却直接使用style属性修改样式为何生效？

嘿，这个问题其实挺有意思的！我当初第一次碰到这种情况的时候也懵了好一会儿😉

这其实是浏览器的一个历史遗留行为——所有带有id属性的HTML元素，会被浏览器自动挂载到全局的window对象上，成为一个以id值命名的全局变量。

具体到你的代码来说：

• 你在HTML里写了<div class="question" id="question">，浏览器就自动帮你创建了window.question这个全局变量，它直接指向这个DOM元素
• 所以你不用手动调用document.getElementById('question')去获取元素，直接用question就能访问到它，自然也能修改它的style属性啦

不过这里要提醒你一下：

• 这个行为并不是标准规范里强制要求的，虽然主流浏览器都支持，但属于“约定俗成”的非标准特性
• 如果你的全局变量名和元素id重名，很容易出现冲突（比如你自己声明了一个叫question的变量，就会覆盖浏览器自动创建的那个）
• 从代码可读性和健壮性来说，最佳实践还是手动通过document.getElementById()或者document.querySelector()来获取DOM元素，这样代码逻辑更清晰，也不会有意外的坑

举个简单的对比例子：

// 依赖浏览器自动挂载（不推荐）
question.style.backgroundColor = "#68e1fd"

// 手动获取元素（推荐）
const question = document.getElementById('question')
question.style.backgroundColor = "#68e1fd"

内容来源于stack exchange