将CSS属性存入JavaScript变量后修改变量值，对应CSS属性是否会变化？及let与var的区别和选型建议

嘿，我来帮你把这两个前端开发里的基础问题掰扯清楚，都是容易踩坑的点～

核心问题：把DOM元素CSS属性存入JS变量后，修改变量会同步DOM样式吗？ #

答案是：完全不会有变化。

当你执行这段代码时：

let property = document.getElementById("el").style.display;

你只是把el元素当前display属性的字符串值，复制了一份存到property变量里。JavaScript里的字符串属于「原始值」，赋值时是值传递——相当于把写着当前样式的纸条复印了一张，原件（DOM元素的style.display）和复印件（property变量）是完全独立的两个东西。

所以后续执行property = "block"，只是修改了复印件的内容，原件根本没被触碰，自然不会影响DOM元素的实际样式。

如果想要真正修改DOM元素的display属性，必须直接操作它的style对象：

const el = document.getElementById("el");
el.style.display = "block"; // 这样才会生效

子问题：let和var的区别是什么？开发优先选哪个？ #

这俩都是变量声明关键字，但差异非常明显，主要体现在这几个维度：

• 作用域范围：
  • var是函数作用域——只有在函数内部声明的var变量才会被局限在函数内，if、for这类块级代码里的var会“泄露”到外部作用域。
  • let是块级作用域——只要是{}包裹的区域（比如if语句块、for循环块），里面的let变量就只能在这个块内访问，不会泄露。
• 变量提升与暂时性死区：
  • var会被提升到作用域顶部，哪怕在声明前访问它，只会得到undefined，不会报错。
  • let虽然也有提升，但存在「暂时性死区」——在声明语句之前的区域访问let变量，直接抛出ReferenceError，能避免很多提前使用变量的低级bug。
• 重复声明限制：
  • var允许在同一个作用域里重复声明同一个变量，后面的声明会覆盖前面的，很容易造成意外的变量覆盖问题。
  • let不允许在同一个作用域里重复声明，一旦重复写，直接报错，规则更严谨。
• 全局对象绑定：
  • 在全局作用域用var声明的变量，会成为浏览器window对象的属性（比如var name = 'xxx'，可以用window.name访问）。
  • let声明的全局变量不会绑定到window上，避免污染全局对象。

开发优先选哪个？ #

毫无疑问优先选let（还有const）！

let的块级作用域和严格的声明规则，能帮你避开var带来的各种坑——比如循环变量泄露、意外覆盖变量、提前使用变量导致的奇怪问题。如果你的变量声明后不会被修改，那更推荐用const，它比let多了一层“只读”的约束，代码可读性和安全性更高。

内容的提问来源于stack exchange，提问作者Богдан Иманкулов