异常教程

JavaScript HTML DOM 改变 CSS（超详细）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

在网页开发领域，JavaScript、HTML 和 CSS 是构建动态交互效果的三大核心技术。其中，JavaScript HTML DOM 改变 CSS 的能力，让开发者能够通过代码实时调整页面样式，实现从简单的按钮颜色变化到复杂的动画效果等丰富功能。对于编程初学者而言，掌握这一技能不仅是理解前端技术栈的关键，更是迈向更复杂交互场景的第一步。本文将从基础概念出发，结合实际案例，逐步解析如何通过 JavaScript 操控 DOM 来修改 CSS 样式，并提供可复用的代码模式和最佳实践。

一、理解基础概念：DOM、CSS 和 JavaScript 的关系

1.1 什么是 DOM？

DOM（Document Object Model，文档对象模型） 是一个编程接口，它将 HTML 文档中的每个元素（如 <div>、<p>）转化为可操作的对象。想象 DOM 像一棵“树”，根节点是 <html>，每个标签都是树上的分支或叶子。通过 JavaScript，开发者可以像修剪树木一样，修改节点的属性、样式或内容。

1.2 CSS 样式如何与 DOM 交互？

CSS 负责定义元素的视觉表现，而 DOM 允许 JavaScript 动态访问和修改这些样式。例如：

  • 通过 element.style 直接修改内联样式（如 color: red）。
  • 通过 classList 方法切换元素的类名，从而触发 CSS 类的样式变化。
  • 利用 CSS 变量（Custom Properties）实现更灵活的样式控制。

1.3 JavaScript 的作用：桥梁与驱动

JavaScript 是连接 DOM 和 CSS 的“桥梁”。它通过事件监听（如点击、鼠标悬停）触发样式变化，并通过算法逻辑决定具体的样式修改策略。例如，当用户点击按钮时，JavaScript 可以检测到事件，找到目标元素，然后调整其背景颜色。

二、核心方法：如何通过 JavaScript 改变 CSS 样式

2.1 直接修改内联样式（element.style）

这是最基础且直接的方式，通过访问元素的 style 属性来设置或获取样式属性。

案例：点击按钮改变文本颜色

<button onclick="changeColor()">点击变色</button>
<p id="text">Hello World!</p>

<script>
  function changeColor() {
    const textElement = document.getElementById("text");
    textElement.style.color = "blue"; // 直接修改颜色
    textElement.style.fontSize = "20px"; // 修改字体大小
  }
</script>

注意点：

  • 样式属性名需用驼峰式（如 fontSize 而非 font-size）。
  • 内联样式会覆盖外部 CSS 文件的同名属性，需谨慎使用。

2.2 通过类名切换（classList）

通过修改元素的 class 属性，结合 CSS 预定义的样式类，可以实现更优雅的样式切换。

案例：悬停时显示高亮效果

<div id="box" onmouseover="highlight()" onmouseout="unhighlight()">
  鼠标悬停试试！
</div>

<style>
  .highlight {
    background-color: yellow;
    transform: scale(1.1); /* 放大10% */
  }
</style>

<script>
  const box = document.getElementById("box");
  
  function highlight() {
    box.classList.add("highlight"); // 添加类
  }
  
  function unhighlight() {
    box.classList.remove("highlight"); // 移除类
  }
</script>

优势：

  • 保持样式与 HTML 结构分离，符合模块化设计原则。
  • classList 提供了 toggle() 方法，可一键切换类的添加或移除。

2.3 使用 CSS 变量（Custom Properties）

CSS 变量允许在 JavaScript 中动态修改样式值，尤其适合需要频繁调整的场景（如渐变动画）。

案例：拖动滑块调整字体大小

<input type="range" min="12" max="36" oninput="updateFontSize(this.value)">
<p id="dynamic-text">拖动我看看！</p>

<style>
  :root {
    --font-size: 16px; /* 定义变量 */
  }
  
  #dynamic-text {
    font-size: var(--font-size); /* 使用变量 */
  }
</style>

<script>
  function updateFontSize(value) {
    document.documentElement.style.setProperty("--font-size", `${value}px`);
  }
</script>

原理：

  • 在 :root 伪类中定义变量，使其全局可用。
  • JavaScript 通过 setProperty 方法直接修改变量值，触发所有引用该变量的元素自动更新。

三、动态样式应用：从简单到复杂

3.1 响应式样式调整

结合窗口大小变化（window.resize 事件），动态调整布局。

案例：窄屏时隐藏导航栏

<nav id="nav">导航菜单</nav>

<style>
  @media (max-width: 768px) {
    .hidden {
      display: none;
    }
  }
</style>

<script>
  window.addEventListener("resize", () => {
    const nav = document.getElementById("nav");
    if (window.innerWidth <= 768) {
      nav.classList.add("hidden");
    } else {
      nav.classList.remove("hidden");
    }
  });
</script>

关键点：

  • 使用事件监听器而非定时器，避免性能浪费。
  • 通过媒体查询配合类名切换，保持代码简洁。

3.2 动画效果的实现

通过逐帧修改样式属性，模拟 CSS 动画效果。

案例：按钮点击后的跳动动画

<button id="jump-btn">点击我</button>

<script>
  function startAnimation(element) {
    let position = 0;
    const interval = setInterval(() => {
      position += 5;
      element.style.transform = `translateY(${position}px)`;
      if (position > 50) clearInterval(interval);
    }, 10);
  }
  
  document.getElementById("jump-btn").addEventListener("click", () => {
    startAnimation(document.getElementById("jump-btn"));
  });
</script>

优化建议：

  • 对于复杂动画，优先使用 CSS @keyframes，再通过 JavaScript 触发 play() 方法。
  • 使用 requestAnimationFrame() 替代 setTimeout，提升动画流畅度。

四、高级技巧与常见问题

4.1 样式优先级与覆盖问题

当多个样式规则冲突时，需注意 CSS 的优先级计算规则：
| 规则类型 | 优先级权重 |
|-------------------|------------|
| 行内样式（style） | 1000 |
| ID 选择器 | 100 |
| 类选择器 | 10 |
| 元素选择器 | 1 |

解决方案：

  • 使用 !important（谨慎使用，可能破坏样式结构）。
  • 通过更具体的 CSS 选择器覆盖原有样式。

4.2 动态样式与性能优化

频繁修改 DOM 样式可能导致页面卡顿，可通过以下方式优化：

  1. 批量操作：将多个样式修改集中在一个函数中执行。
  2. 使用 Web API：例如 getComputedStyle() 获取计算后的样式，避免重复计算。
  3. 虚拟 DOM：在复杂场景中，考虑使用 React/Vue 等框架的虚拟 DOM 机制。

五、总结与展望

通过本文，我们从基础到进阶，系统学习了如何利用 JavaScript HTML DOM 改变 CSS 的多种方法。关键要点包括：

  • 直接修改内联样式 适合快速调整简单属性。
  • 类名切换 是保持代码结构化的首选方案。
  • CSS 变量 为动态样式提供了更灵活的控制能力。

对于中级开发者，建议进一步探索以下方向：

  • CSS Houdini：通过 JavaScript 直接扩展浏览器样式引擎。
  • 响应式设计模式：结合媒体查询与 JavaScript 实现自适应布局。

掌握这些技术后，你将能够构建出更具交互性和视觉表现力的网页应用。记住，实践是学习的最佳途径——尝试将本文的案例改造成自己的项目，并逐步添加更多功能！

最新发布

查看更多文章