最常用、最直接的方式是操作元素的style属性，对应内联样式；需用驼峰命名（如backgroundColor），支持单个设置、Object.assign批量赋值，但仅影响内联样式且无法读取外部CSS值。
JavaScript 中动态修改 DOM 元素的样式属性，最常用、最直接的方式是操作元素的 style 属性，它对应元素的内联样式（inline styles）。这种方式适合设置单个或少量样式，响应用户交互、动画起始状态等场景。
通过 element.style.xxx 设置单个 CSS 属性
每个 CSS 属性名在 JavaScript 中需转为驼峰命名（camelCase），例如 background-color → backgroundColor，font-size → fontSize。
element.style.color = "red";element.style.backgroundColor = "#f0f0f0";element.style.fontSize = "16px";-
element.style.display = "none";（隐藏元素）
批量设置多个样式：使用 Object.assign 或循环赋值
避免重复写 element.style.xxx，可一次性应用多个样式：
- 用
Object.assign：
Object.assign(element.style, {
color: "blue",
margin: "10px",
padding: "8px",
borderRadius: "4px"
});- 或遍历对象手动赋值（兼容性更好）：
const styles = { color: "green", opacity: "0.8", transform: "scale(1.1)" };
for (const [prop, value] of Object.entries(styles)) {
element.style[prop] = value;
}切换/添加/移除 CSS 类更推荐用于复杂样式管理
直接改 style 只影响内联样式，无法覆盖外部 CSS 中的高优先级规则（如带 !important 的样式），也不利于维护。实际项目中，应优先用 className 或 classList 控制预定义的 CSS 类：
-
element.className = "active highlight";（覆盖全部类） element.classList.add("active");element.classList.remove("disabled");element.classList.toggle("hidden");element.classList.replace("old", "new");
注意：style 修改只作用于内联样式，不读取外部 CSS
element.style.xxx 只能获取/设置**内联样式**中的值，无法读取来自样式表或浏览器默认的计算后样式。若需读取真实渲染后的值（比如判断当前是否显示），应使用 getComputedStyle(element).propertyName：
-
getComputedStyle(element).display→ 返回实际生效的display值（如"block"） - 该方法返回只读对象，不能用来设置样式
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
