使用JavaScript setAttribute()的原因及样式设置差异咨询

嘿，我来帮你拆解这两个问题～

一、为什么要使用setAttribute()方法？ #

简单说，它是一个通用的DOM属性操作工具，适用场景包括：

• 通用性强：可以设置元素的任意属性，不管是原生HTML属性（比如class、id、data-custom这类自定义属性），都能用它统一处理，不用记某些属性对应的DOM对象特殊名称（比如class在JS里要写className，但用setAttribute直接写"class"就行）
• 批量/特殊属性处理：当你需要一次性设置多个不常用属性，或者处理一些自定义属性时，用它会比单独操作DOM对象属性更简洁统一
• 兼容性兜底：虽然现代浏览器已经很少有这个问题，但在一些老旧浏览器中，直接操作DOM对象属性可能存在兼容性差异，setAttribute的表现会更稳定

二、为什么直接设置style单个属性和setAttribute设置style的效果不同？ #

这两种方式本质上操作的对象完全不一样：

• 当你写document.getElementById("FlightPanels").style.height = ...时，你是在操作DOM元素的style对象（属于CSSStyleDeclaration类型）。这个对象会把你设置的每个属性单独管理，相当于在元素的内联样式里追加或修改单个属性，不会影响已经设置好的其他样式属性——所以不管先设width还是height，两者都会保留。
• 而用setAttribute("style", "...")时，你是直接替换整个style属性的字符串内容。比如你先设置height的style字符串，第二次调用setAttribute设置width时，会把之前的style字符串完全覆盖，导致之前的height样式丢失。

如果一定要用setAttribute设置多个样式，你需要把所有样式整合到同一个字符串里，比如：

document.getElementById("FlightPanels").setAttribute("style", `height: ${PANEL_HEIGHT + 00}px; width: ${container_width}px;`);

总结一下：如果只是修改单个样式属性，用element.style.xxx的方式更省心，不会误删其他样式；如果要一次性设置多个内联样式，或者操作非样式类的属性，再考虑用setAttribute。

内容的提问来源于stack exchange，提问作者KWallace