javascript修改元素style属性仅操作内联样式，需用驼峰命名（如backgroundcolor）、带单位赋值，可用object.assign批量设置，读取时仅返回内联值，计算样式需getcomputedstyle。

直接用 JavaScript 修改元素的 style 属性，就是操作其内联样式（inline styles），本质是修改元素 DOM 对象的 style 这个 CSSStyleDeclaration 对象。

基本语法：点号或方括号设置单个样式

每个 CSS 属性在 JS 中对应一个驼峰命名的属性名（如 background-color → backgroundColor，font-size → fontSize）：

• element.style.color = "red";
• element.style.fontSize = "16px";
• element.style.backgroundColor = "#f0f0f0";
• 也可用方括号语法（适合含短横线或动态属性名）：element.style["z-index"] = "10";

注意：只影响内联样式，不覆盖 CSS 类或外部样式表

style 属性仅读写元素的 style HTML 属性值（即写在标签里的 style="..."），不会修改 class、CSS 文件或 <style></style> 块中的规则。即使设置了 element.style.display = "none"，如果类里有 display: block !important，仍可能被覆盖（因 !important 优先级更高）。

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

批量设置多个样式：用 Object.assign 或循环

避免重复写 element.style.xxx 多次，可一次性赋值：

• 推荐方式（简洁安全）：
  

  Object.assign(element.style, {<br>  color: "blue",<br>  fontSize: "18px",<br>  marginTop: "10px"<br>});

• 兼容旧浏览器可用 for…in 循环遍历对象，逐个赋值

获取当前内联样式值：直接读取 style 属性

element.style.width 只返回内联设置的值（如 "200px"），若没设过则为空字符串。要获取最终计算后的样式（含 CSS 类、继承等），需用 getComputedStyle(element).width。

不复杂但容易忽略：驼峰命名规则、仅作用于内联样式、赋值必须带单位（如 px、%），否则多数属性无效。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南