编辑“︁HTML样式操作”︁（章节）

== 详细说明 ==

=== 通过style属性修改 ===
最直接的样式操作方式，优先级高于外部CSS（除非使用!important）

<syntaxhighlight lang="javascript">
// 获取元素
const header = document.getElementById("main-header");

// 单个属性设置
header.style.color = "#2c3e50";
header.style.fontSize = "24px";

// 批量设置（性能更优）
header.style.cssText = "background: #f8f9fa; padding: 1rem; border-radius: 4px;";

// 移除样式
header.style.color = "";
</syntaxhighlight>

'''注意事项'''：
* 属性名使用camelCase（如fontSize而非font-size）
* 值必须是字符串（包含单位）
* 修改会立即触发浏览器重绘

=== 通过classList操作 ===
更推荐的方式，符合表现与行为分离原则：

<syntaxhighlight lang="javascript">
const button = document.querySelector(".cta-button");

// 添加类
button.classList.add("active");

// 移除类
button.classList.remove("disabled");

// 切换类（无则添加，有则移除）
button.classList.toggle("highlight");

// 检查类存在
if (button.classList.contains("warning")) {
    console.log("警告样式已应用");
}
</syntaxhighlight>

对应CSS可能如下：
<syntaxhighlight lang="css">
.active {
    background-color: #3498db;
    transform: scale(1.05);
}
.highlight {
    box-shadow: 0 0 8px gold;
}
</syntaxhighlight>

=== 获取计算样式 ===
当需要读取最终应用的样式时（包含所有CSS来源）：

<syntaxhighlight lang="javascript">
const element = document.querySelector(".widget");
const styles = window.getComputedStyle(element);

console.log(styles.getPropertyValue("width")); // 如"300px"
console.log(styles.backgroundColor); // rgb(255, 255, 255)
</syntaxhighlight>