5.5 CSS 和 JavaScript 的协作

5.5 CSS 和 JavaScript 的协作

CSS 和 JavaScript 是构建现代网页的核心技术之一，二者在网页开发中各司其职：CSS 负责样式和布局，而 JavaScript 负责交互和动态行为。在实际开发中，它们的协作能够实现更复杂的效果，如动态主题切换、动画效果、响应式设计等。

5.5.1 CSS 和 JavaScript 的基本交互方式

JavaScript 可以通过多种方式与 CSS 协作，以下是最常见的方法：

1. 操控 CSS 类名

JavaScript 可以使用 DOM 操作来添加、移除或切换 HTML 元素的类名，从而改变元素的样式。

示例：

<div id="box" class="box"></div>
<button id="toggle">切换样式</button>

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: blue;
  }
  .active {
    background-color: red;
  }
</style>

<script>
  const box = document.getElementById('box');
  const button = document.getElementById('toggle');

  button.addEventListener('click', () => {
    box.classList.toggle('active'); // 切换 active 类
  });
</script>

2. 修改行内样式

JavaScript 可以直接修改元素的 style 属性，动态地改变元素的样式。

示例：

<div id="box" style="width: 100px; height: 100px; background-color: blue;"></div>
<button id="change">改变颜色</button>

<script>
  const box = document.getElementById('box');
  const button = document.getElementById('change');

  button.addEventListener('click', () => {
    box.style.backgroundColor = 'red'; // 修改背景色
  });
</script>

3. 动态创建和修改样式表

JavaScript 可以动态创建 <style> 标签或修改现有样式表，适合全局样式的动态调整。

示例：

<button id="add-style">添加样式</button>

<script>
  const button = document.getElementById('add-style');

  button.addEventListener('click', () => {
    const style = document.createElement('style');
    style.textContent = `
      body {
        background-color: lightgray;
      }
    `;
    document.head.appendChild(style);
  });
</script>

5.5.2 CSS 变量（Custom Properties）与 JavaScript

CSS 变量为 JavaScript 和 CSS 的协作提供了更灵活的方式。通过 JavaScript 动态修改 CSS 变量，可以实现全局样式的实时调整。

示例：主题切换

<div class="container">
  <button id="theme-toggle">切换主题</button>
</div>

<style>
  :root {
    --bg-color: white;
    --text-color: black;
  }

  body {
    background-color: var(--bg-color);
    color: var(--text-color);
  }
</style>

<script>
  const button = document.getElementById('theme-toggle');
  let isDarkMode = false;

  button.addEventListener('click', () => {
    if (isDarkMode) {
      document.documentElement.style.setProperty('--bg-color', 'white');
      document.documentElement.style.setProperty('--text-color', 'black');
    } else {
      document.documentElement.style.setProperty('--bg-color', 'black');
      document.documentElement.style.setProperty('--text-color', 'white');
    }
    isDarkMode = !isDarkMode;
  });
</script>

5.5.3 动画与过渡效果

CSS 的动画和过渡可以通过 JavaScript 控制启动、暂停或重置，从而实现更复杂的交互效果。

1. 启用和切换 CSS 动画

通过 JavaScript 添加或移除特定的类，可以动态启用 CSS 动画。

示例：点击触发动画

<div id="box" class="box"></div>
<button id="animate">开始动画</button>

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: blue;
    transition: transform 0.5s ease;
  }
  .animated {
    transform: rotate(45deg);
  }
</style>

<script>
  const box = document.getElementById('box');
  const button = document.getElementById('animate');

  button.addEventListener('click', () => {
    box.classList.toggle('animated');
  });
</script>

2. 控制 CSS 动画的状态

通过 JavaScript 调整 CSS 的 animation-play-state 属性，可以暂停或恢复动画。

示例：控制动画

<div id="circle" class="circle"></div>
<button id="pause">暂停</button>
<button id="resume">继续</button>

<style>
  .circle {
    width: 50px;
    height: 50px;
    background-color: red;
    border-radius: 50%;
    animation: bounce 2s infinite;
  }

  @keyframes bounce {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-50px);
    }
  }
</style>

<script>
  const circle = document.getElementById('circle');
  const pause = document.getElementById('pause');
  const resume = document.getElementById('resume');

  pause.addEventListener('click', () => {
    circle.style.animationPlayState = 'paused';
  });

  resume.addEventListener('click', () => {
    circle.style.animationPlayState = 'running';
  });
</script>

5.5.4 响应式设计中的协作

JavaScript 可以配合 CSS 媒体查询动态调整页面样式和内容布局。例如，通过监听窗口尺寸变化来调整页面的布局。

示例：窗口宽度调整

<div id="message"></div>

<style>
  #message {
    font-size: 20px;
    margin: 20px;
  }
</style>

<script>
  const message = document.getElementById('message');

  function updateMessage() {
    const width = window.innerWidth;
    if (width < 600) {
      message.textContent = '这是小屏幕';
    } else if (width < 1024) {
      message.textContent = '这是中屏幕';
    } else {
      message.textContent = '这是大屏幕';
    }
  }

  window.addEventListener('resize', updateMessage);
  updateMessage(); // 初始化调用
</script>

5.5.5 动态加载样式文件

在复杂的项目中，可以使用 JavaScript 动态加载 CSS 文件以减少初始加载时间，或根据用户操作加载特定的样式。

示例：动态加载主题

<button id="load-dark-theme">加载深色主题</button>

<script>
  const button = document.getElementById('load-dark-theme');

  button.addEventListener('click', () => {
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = 'dark-theme.css';
    document.head.appendChild(link);
  });
</script>

总结

CSS 和 JavaScript 的协作为网页开发带来了强大的灵活性和动态交互能力。通过类名操作、CSS 变量、动画控制和响应式设计，开发者可以实现丰富的用户体验效果。在实际项目中，应根据具体需求选择最适合的协作方式，同时注重代码的性能和可维护性。