直接通过element.style属性修改行内样式，需用驼峰命名且值为带单位字符串；可批量用cssText（覆盖）或Object.assign（合并）；style仅读写行内样式，不涉及CSS类或外部样式。
直接通过元素的 style 属性修改，这是最常用、最直接的方式。
使用 element.style.属性名 = 值
JavaScript 中每个 DOM 元素都有一个 style 属性，它是一个 CSSStyleDeclaration 对象，对应元素的行内样式（即写在 HTML 的 style 属性里的样式）。你可以用点语法设置单个 CSS 属性：
- CSS 属性名需转为驼峰命名：如 background-color → backgroundColor，font-size → fontSize，z-index → zIndex
- 值必须是字符串，且通常要带单位（如 "20px"、"#ff0"、"bold"）
示例：
const box = document.getElementById("myBox");
box.style.width = "300px";
box.style.backgroundColor = "#f0f0f0";
box.style.borderRadius = "8px";
box.style.fontSize = "16px";
批量设置多个样式：用 style.cssText 或 Object.assign
频繁设置多个样式时，逐个赋值略显繁琐。可采用以下两种更高效的方式：
立即学习“Java免费学习笔记（深入）”；
- cssText：一次性覆盖整个行内 style 字符串（会清空原有行内样式）
- Object.assign(element.style, {...})：合并式赋值，保留已有的其他行内样式（推荐）
示例：
const box = document.getElementById("myBox");
// 方式1：用 cssText（慎用，会覆盖全部已有行内样式）
box.style.cssText = "width: 300px; background: #eee; border-radius: 4px;";
// 方式2：用 Object.assign（更安全，只更新指定属性）
Object.assign(box.style, {
width: "300px",
backgroundColor: "#eee",
borderRadius: "4px",
padding: "12px"
});
注意：style 只影响行内样式，不读取/修改 CSS 类或外部样式
element.style 是只读“行内样式”的映射，它：
- ✅ 能设置和读取当前元素 HTML 中 style 属性里已存在 的样式（或 JS 新设的）
- ❌ 不能读取来自 CSS 类、<style> 标签或外部 CSS 文件的样式（要用 getComputedStyle()）
- ❌ 不会自动同步类名变更带来的样式变化
例如：<div id="a" class="btn"></div>，即使 .btn 定义了 color: blue，a.style.color 仍为空字符串 —— 因为它不在行内。
移除某个行内样式：赋值为空字符串
把某个 style 属性设为空字符串，相当于从行内样式中删除该项（浏览器会回退到 CSS 级联规则）：
box.style.backgroundColor = ""; // 移除行内 background-color box.style.fontSize = ""; // 移除行内 font-size
注意：这不会删除整个 style 属性，只是清空该字段；若所有 style 属性都被清空，HTML 中的 可能仍存在（取决于浏览器，但视觉上无影响）。
