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

= HTML样式操作 =

HTML样式操作是指通过JavaScript动态修改HTML元素的样式属性，从而实现网页外观的实时变化。这是前端开发中实现交互效果的核心技术之一，允许开发者根据用户行为（如点击、悬停）或程序逻辑（如数据变化）调整页面呈现。

== 核心概念 ==

=== 样式访问方法 ===
JavaScript提供三种主要方式操作元素样式：

1. '''style属性''' - 直接修改元素的inline样式
2. '''classList API''' - 通过CSS类名控制样式
3. '''getComputedStyle()''' - 获取最终计算样式

<mermaid>
graph LR
    A[HTML元素] --> B[style属性]
    A --> C[classList]
    A --> D[getComputedStyle]
</mermaid>

== 详细说明 ==

=== 通过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>

== 性能优化 ==

考虑以下优化策略：
1. 批量修改时使用<code>cssText</code>而非多次赋值
2. 复杂动画使用CSS动画而非JavaScript控制
3. 使用<code>requestAnimationFrame</code>进行视觉变更

数学公式示例（计算过渡时间）：
<math>
t_{optimal} = \frac{\Delta_{style}}{v_{max}}
</math>
其中<math>v_{max}</math>是最大允许变化速率

== 实际案例 ==

=== 动态主题切换 ===
<syntaxhighlight lang="javascript">
function toggleDarkMode() {
    const body = document.body;
    body.classList.toggle("dark-theme");
    
    // 同步保存用户偏好
    localStorage.setItem("darkMode", body.classList.contains("dark-theme"));
}
</syntaxhighlight>

=== 响应式表格高亮 ===
<syntaxhighlight lang="javascript">
document.querySelectorAll("tr").forEach(row => {
    row.addEventListener("mouseenter", () => {
        row.style.backgroundColor = "#f0f7ff";
    });
    row.addEventListener("mouseleave", () => {
        row.style.backgroundColor = "";
    });
});
</syntaxhighlight>

== 浏览器兼容性 ==

{| class="wikitable"
|-
! 特性
! Chrome
! Firefox
! Safari
! Edge
|-
| style属性
| 1+
| 1+
| 1+
| 12+
|-
| classList
| 8+
| 3.6+
| 5.1+
| 10+
|-
| getComputedStyle
| 1+
| 1+
| 1+
| 12+
|}

== 最佳实践 ==

1. 优先使用class操作而非直接style修改
2. 将动画相关样式放入CSS，用class控制状态
3. 对于频繁变更的样式（如滚动效果），考虑使用transform和opacity等合成层属性
4. 使用CSS自定义属性（变量）实现更灵活的样式控制：

<syntaxhighlight lang="css">
:root {
    --primary-color: #3498db;
}
</syntaxhighlight>

<syntaxhighlight lang="javascript">
document.documentElement.style.setProperty("--primary-color", "#e74c3c");
</syntaxhighlight>

== 进阶话题 ==

* CSSOM（CSS对象模型）深度操作
* 使用MutationObserver监听样式变化
* 使用CSS Typed OM（性能更好的新API）

通过掌握这些技术，开发者可以创建高度动态和响应式的用户界面，同时保持代码的可维护性和性能。

[[Category:编程语言]]
[[Category:HTML]]
[[Category:HTML与JavaScript交互]]