JavaScript DOM样式

介绍

在Web开发中，能够动态地修改页面元素的样式是创建交互式网站的关键能力。JavaScript通过DOM（文档对象模型）提供了多种方式来操作HTML元素的样式，使开发者能够根据用户交互或其他条件改变页面的外观和感觉。

本教程将介绍如何使用JavaScript来操作DOM元素的样式，包括：

使用内联样式（style属性）
操作CSS类（添加、删除、切换）
获取计算样式
实际应用场景和最佳实践

使用内联样式

style属性

JavaScript可以直接通过元素的style属性来修改内联样式。每个DOM元素都有一个style对象，它包含了所有可能的CSS属性，你可以通过点符号访问和修改它们。

javascript
// 获取元素
const element = document.getElementById("myElement");

// 设置背景颜色
element.style.backgroundColor = "lightblue";

// 设置宽度
element.style.width = "200px";

// 设置字体大小和颜色
element.style.fontSize = "18px";
element.style.color = "#333";

备注

注意在JavaScript中，CSS属性名称需要使用驼峰命名法（如backgroundColor而不是background-color）。

设置多个样式

如果你需要一次性设置多个样式，可以使用以下方法之一：

连续设置多个style属性：

javascript
const box = document.querySelector(".box");
box.style.padding = "20px";
box.style.margin = "10px";
box.style.border = "1px solid black";
box.style.backgroundColor = "#f0f0f0";

使用cssText属性（一次性替换所有内联样式）：

javascript
const box = document.querySelector(".box");
box.style.cssText = "padding: 20px; margin: 10px; border: 1px solid black; background-color: #f0f0f0;";

获取内联样式值

你可以通过同样的方式获取元素当前的内联样式：

javascript
const box = document.querySelector(".box");
console.log(box.style.backgroundColor); // 输出当前背景颜色

警告

使用element.style只能获取内联样式的值，而不是计算样式或从CSS文件中应用的样式！

操作CSS类

使用classList API

修改元素样式的一个更好的方法是通过添加或删除CSS类。这种方式可以将样式定义集中在CSS文件中，使代码更易于维护。

HTML和CSS：

html
<div id="myBox" class="box">这是一个盒子</div>

css
.box {
  padding: 10px;
  background-color: #f0f0f0;
}

.highlight {
  background-color: yellow;
  border: 2px solid orange;
}

.hidden {
  display: none;
}

JavaScript操作CSS类：

javascript
const box = document.getElementById("myBox");

// 添加类
box.classList.add("highlight");

// 删除类
box.classList.remove("box");

// 切换类（如果有则删除，如果没有则添加）
box.classList.toggle("hidden");

// 检查是否包含某个类
if (box.classList.contains("highlight")) {
  console.log("盒子当前处于高亮状态");
}

// 替换类
box.classList.replace("highlight", "selected");

classList是一个强大的API，它提供了一系列方法来简化CSS类的操作。

className属性

另一种方式是使用className属性，它表示元素的所有类名的字符串：

javascript
const box = document.getElementById("myBox");

// 获取所有类名
console.log(box.className); // 例如："box highlight"

// 完全替换类名
box.className = "new-class another-class";

提示

通常classListAPI比直接操作className更方便，因为它不需要你手动解析和操作类名字符串。

获取计算样式

为了获取元素最终应用的样式（包括从CSS样式表应用的样式），我们需要使用getComputedStyle()方法：

javascript
const box = document.getElementById("myBox");
const computedStyle = window.getComputedStyle(box);

// 获取计算后的背景颜色
console.log(computedStyle.backgroundColor);

// 获取计算后的宽度
console.log(computedStyle.width);

// 获取计算后的字体大小
console.log(computedStyle.fontSize);

备注

计算样式是只读的，你不能通过修改computedStyle对象来改变元素的样式。

获取伪元素样式

getComputedStyle()还可以用来获取伪元素的样式：

javascript
// 获取 ::before 伪元素的样式
const beforeStyle = window.getComputedStyle(box, "::before");
console.log(beforeStyle.content);

// 获取 ::after 伪元素的样式
const afterStyle = window.getComputedStyle(box, "::after");
console.log(afterStyle.width);

实际应用场景

1. 创建一个简单的切换主题功能

html
<button id="themeToggle">切换主题</button>
<div id="content" class="light-theme">
  <h2>网站内容</h2>
  <p>这是一段演示文字，用于展示主题切换效果。</p>
</div>

css
.light-theme {
  background-color: #fff;
  color: #333;
}

.dark-theme {
  background-color: #333;
  color: #fff;
}

javascript
const themeToggle = document.getElementById("themeToggle");
const content = document.getElementById("content");

themeToggle.addEventListener("click", () => {
  // 使用classList.toggle在两个主题之间切换
  content.classList.toggle("light-theme");
  content.classList.toggle("dark-theme");
  
  // 更新按钮文本
  const currentTheme = content.classList.contains("dark-theme") ? "亮色" : "暗色";
  themeToggle.textContent = `切换到${currentTheme}主题`;
});

2. 创建一个简单的图片库滤镜效果

html
<div class="filters">
  <button data-filter="normal">正常</button>
  <button data-filter="grayscale">灰度</button>
  <button data-filter="sepia">怀旧</button>
  <button data-filter="blur">模糊</button>
</div>

<img id="image" src="example.jpg" alt="示例图片" />

javascript
const buttons = document.querySelectorAll('.filters button');
const image = document.getElementById('image');

buttons.forEach(button => {
  button.addEventListener('click', () => {
    const filter = button.getAttribute('data-filter');
    
    // 根据选择的滤镜应用不同的CSS
    switch(filter) {
      case 'normal':
        image.style.filter = 'none';
        break;
      case 'grayscale':
        image.style.filter = 'grayscale(100%)';
        break;
      case 'sepia':
        image.style.filter = 'sepia(100%)';
        break;
      case 'blur':
        image.style.filter = 'blur(5px)';
        break;
    }
    
    // 高亮当前选中的按钮
    buttons.forEach(btn => btn.classList.remove('active'));
    button.classList.add('active');
  });
});

3. 响应式菜单的实现

html
<button id="menuToggle">菜单</button>
<nav id="mainNav" class="nav-closed">
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">联系方式</a></li>
  </ul>
</nav>

css
.nav-closed {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.nav-open {
  max-height: 300px;
  transition: max-height 0.5s ease-in;
}

@media (min-width: 768px) {
  #menuToggle {
    display: none;
  }
  
  #mainNav {
    max-height: none;
  }
}

javascript
const menuToggle = document.getElementById("menuToggle");
const mainNav = document.getElementById("mainNav");

menuToggle.addEventListener("click", () => {
  mainNav.classList.toggle("nav-closed");
  mainNav.classList.toggle("nav-open");
  
  // 更新无障碍属性
  const isExpanded = mainNav.classList.contains("nav-open");
  menuToggle.setAttribute("aria-expanded", isExpanded);
});

性能考虑

操作DOM样式可能会影响性能，特别是当你频繁修改需要导致页面重排（reflow）的属性时。这里有一些提高性能的技巧：

批量修改样式：尽量一次性对元素进行所有样式更改，而不是逐个修改。
使用类而不是内联样式：添加/删除CSS类通常比设置多个内联样式更高效。

javascript
// 效率较低
element.style.width = "100px";
element.style.height = "200px";
element.style.backgroundColor = "red";
element.style.border = "1px solid black";

// 效率更高
element.classList.add("my-styled-element");

考虑使用CSS动画而不是JavaScript：CSS动画通常比使用JavaScript持续更新样式更高效。

css
/* CSS动画 */
.animated {
  transition: transform 0.5s ease;
}

.animated:hover {
  transform: scale(1.1);
}

避免触发布局：某些属性如offsetWidth、offsetHeight会触发布局计算，应尽量避免频繁访问。

总结

JavaScript DOM样式操作提供了强大的功能，让我们能够：

使用element.style直接修改内联样式
通过classListAPI添加、删除和切换CSS类
使用getComputedStyle()获取元素最终应用的样式

在实际开发中，通常建议：

使用CSS定义样式规则
使用JavaScript添加/删除CSS类来修改样式，而不是直接操作内联样式
只在必要时使用内联样式，如处理动态计算的值

合理使用DOM样式操作可以创建出响应用户交互的动态界面，提升用户体验。

练习

创建一个按钮，点击时改变一个div元素的背景颜色、宽度和高度。
创建一个图片幻灯片，点击"下一张"按钮时应用过渡效果。
实现一个表单验证功能，当输入无效时将输入框边框变为红色。
创建一个文本大小调整器，通过滑块控制文本的大小。

介绍​

使用内联样式​

style属性​

设置多个样式​

获取内联样式值​

操作CSS类​

使用classList API​

className属性​

获取计算样式​

获取伪元素样式​

实际应用场景​

1. 创建一个简单的切换主题功能​

2. 创建一个简单的图片库滤镜效果​

3. 响应式菜单的实现​

性能考虑​

总结​

练习​

推荐资源​

介绍