JavaScript动态修改CSS根变量：正确引用其他CSS变量的方法-html教程-PHP中文网

JavaScript动态修改CSS根变量：正确引用其他CSS变量的方法

本文详细介绍了如何使用JavaScript动态修改CSS根变量，特别是当需要将一个CSS自定义属性的值设置为另一个自定义属性时。核心在于，通过document.documentElement.style.setProperty()方法设置CSS变量时，如果新值是一个CSS变量引用，必须使用var()函数来正确解析，例如'var(--variable-name)'，而不是直接传递变量名字符串。

引言：CSS自定义属性与JavaScript的交互

css自定义属性（通常称为css变量）为前端开发带来了极大的灵活性，允许我们定义可重用的值，并在整个样式表中引用它们。它们通常在:root选择器中定义，以便全局访问。例如：

:root {
  --primary-color: #007bff;
  --font-size-base: 16px;
}

登录后复制

在JavaScript中，我们可以通过document.documentElement.style.setProperty()方法动态地修改这些CSS变量的值，从而实现主题切换、字体大小调整等交互功能。document.documentElement指向HTML文档的根元素<html>，是定义全局CSS变量的理想位置。

常见误区：直接引用变量名

在尝试将一个CSS变量的值设置为另一个CSS变量时，一个常见的错误是直接将目标变量的名称作为字符串传递给setProperty()方法。考虑以下场景，我们希望将--currentfont变量的值设置为--onpxfont变量的值：

// 错误的示例
document.documentElement.style.setProperty('--currentfont', 'onpxfont');

登录后复制

这段代码的问题在于，它并没有将--currentfont设置为--onpxfont所代表的实际像素值（例如10px），而是将其设置为一个普通的字符串"onpxfont"。CSS解析器在遇到font-size: onpxfont;这样的声明时，会认为onpxfont是一个无效的字体大小值，从而导致样式失效。这是因为setProperty()方法期望接收的是一个有效的CSS值字符串，而不是一个CSS变量的引用方式。

正确姿势：使用var()函数引用CSS变量

要正确地将一个CSS变量的值设置为另一个CSS变量的值，我们需要遵循CSS本身引用变量的语法，即使用var()函数。var()函数是CSS中用于引用自定义属性的内置函数。因此，在JavaScript中通过setProperty()设置时，需要将var(--variable-name)作为一个完整的字符串值传递。

立即学习“Java免费学习笔记（深入）”；

修正后的代码示例如下：

// 正确的示例
document.documentElement.style.setProperty('--currentfont', 'var(--onpxfont)');

登录后复制

通过这种方式，setProperty()将'var(--onpxfont)'这个字符串赋值给--currentfont。当浏览器解析--currentfont时，它会识别出var(--onpxfont)并进一步解析--onpxfont的实际值（例如10px），从而正确应用样式。

知我AI

一款多端AI知识助理，通过一键生成播客/视频/文档/网页文章摘要、思维导图，提高个人知识获取效率；自动存储知识，通过与知识库聊天，提高知识利用效率。

101

查看详情

完整示例：动态字体大小与主题切换

下面是一个完整的示例，演示如何通过JavaScript和var()函数实现动态字体大小调整。

HTML 结构 (index.html)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态CSS变量示例</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <section id="home">
            <div id="ct" class="customize-theme">
                <h3>字体大小</h3>
                <ul class="font-size-options">
                    <li id="on" data-font-var="--onpxfont" data-font-value="10px">
                        <img src="font.png" alt="Font icon">10px
                    </li>
                    <li id="oniki" class="active" data-font-var="--onikipxfont" data-font-value="12px">
                        <img src="font.png" alt="Font icon">12px
                    </li>
                    <li id="ondort" data-font-var="--ondortpxfont" data-font-value="14px">
                        <img src="font.png" alt="Font icon">14px
                    </li>
                    <li id="onalti" data-font-var="--onaltipxfont" data-font-value="16px">
                        <img src="font.png" alt="Font icon">16px
                    </li>
                </ul>
                <h3>主题颜色</h3>
                <div class="color-options">
                    <span id="red" data-color-var="--crimson" style="background-color: crimson;"></span>
                    <span id="black" data-color-var="--black" style="background-color: black;"></span>
                    <span id="purple" data-color-var="--purple" style="background-color: purple;"></span>
                    <span id="orange" data-color-var="--orange" style="background-color: orange;"></span>
                </div>
            </div>
            <p>这是一段示例文本，用于演示字体大小的动态变化。</p>
            <p>当前字体大小为：<span style="font-weight: bold;">var(--currentfont)</span></p>
        </section>
    </div>
    <script src="script.js"></script>
</body>
</html>

登录后复制

CSS 样式 (style.css)

:root {
  /* Colors*/
  --white: #fff;
  --dark: #000;
  --purple: #9051ff;
  --crimson: crimson;
  --black: #0c192c;
  --orange: #ffa500; /* Added orange for completeness */

  /* Font Sizes*/
  --onpxfont: 10px;
  --onikipxfont: 12px;
  --ondortpxfont: 14px;
  --onaltipxfont: 16px;
  --currentfont: var(--onikipxfont); /* Default font size */
  --current-theme-color: var(--purple); /* Default theme color */
}

body {
  font-size: var(--currentfont); /* Apply the current font size */
  font-family: sans-serif;
  margin: 20px;
  color: var(--dark); /* Example usage of another variable */
  background-color: var(--white);
}

.customize-theme {
  border: 1px solid #eee;
  padding: 15px;
  border-radius: 8px;
  max-width: 300px;
  margin-bottom: 20px;
  background-color: var(--white);
}

.customize-theme h3 {
  margin-top: 0;
  margin-bottom: 10px;
  color: var(--dark);
}

.font-size-options {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.font-size-options li {
  cursor: pointer;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 5px;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s ease;
}

.font-size-options li:hover {
  border-color: var(--purple);
}

.font-size-options li.active {
  background-color: var(--current-theme-color); /* Use theme color for active state */
  color: var(--white);
  border-color: var(--current-theme-color);
}

.font-size-options img {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  filter: invert(0%); /* Default icon color */
}

.font-size-options li.active img {
  filter: invert(100%); /* Invert icon color for active state */
}

.color-options {
  display: flex;
  gap: 10px;
}

.color-options span {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.2s ease;
}

.color-options span:hover {
  border-color: var(--dark);
}

.color-options span.active {
  border-color: var(--current-theme-color); /* Highlight active color */
}

/* Example of using current-theme-color */
h3 {
  color: var(--current-theme-color);
}

登录后复制

JavaScript 逻辑 (script.js)

document.addEventListener('DOMContentLoaded', () => {
  const root = document.documentElement;

  // 字体大小选项
  const fontSizeOptions = document.querySelectorAll('.font-size-options li');

  fontSizeOptions.forEach(option => {
    option.addEventListener('click', function() {
      // 移除所有选项的active类
      fontSizeOptions.forEach(item => item.classList.remove('active'));
      // 添加active类到当前点击的选项
      this.classList.add('active');

      // 获取data属性中定义的CSS变量名
      const fontVarName = this.dataset.fontVar;

      // 正确地设置--currentfont，引用另一个CSS变量
      root.style.setProperty('--currentfont', `var(${fontVarName})`);
    });
  });

  // 主题颜色选项
  const colorOptions = document.querySelectorAll('.color-options span');

  colorOptions.forEach(option => {
    option.addEventListener('click', function() {
      // 移除所有颜色选项的active类
      colorOptions.forEach(item => item.classList.remove('active'));
      // 添加active类到当前点击的颜色选项
      this.classList.add('active');

      // 获取data属性中定义的CSS变量名
      const colorVarName = this.dataset.colorVar;

      // 设置--current-theme-color，引用另一个CSS变量
      root.style.setProperty('--current-theme-color', `var(${colorVarName})`);

      // 重新应用字体大小的active样式，确保颜色更新
      const currentActiveFont = document.querySelector('.font-size-options li.active');
      if (currentActiveFont) {
        currentActiveFont.classList.remove('active'); // 临时移除
        currentActiveFont.classList.add('active');    // 重新添加，触发样式更新
      }
    });
  });

  // 初始化设置
  // 确保页面加载时，根据默认值设置正确的active状态
  const initialActiveFont = document.querySelector('.font-size-options li.active');
  if (initialActiveFont) {
    const initialFontVar = initialActiveFont.dataset.fontVar;
    root.style.setProperty('--currentfont', `var(${initialFontVar})`);
  }

  const initialActiveColor = document.querySelector('.color-options span.active');
  if (initialActiveColor) {
    const initialColorVar = initialActiveColor.dataset.colorVar;
    root.style.setProperty('--current-theme-color', `var(${initialColorVar})`);
  } else {
    // 如果没有预设active颜色，则默认选中第一个或某个特定颜色
    if (colorOptions.length > 0) {
      colorOptions[0].classList.add('active');
      root.style.setProperty('--current-theme-color', `var(${colorOptions[0].dataset.colorVar})`);
    }
  }
});

登录后复制

注意事项与最佳实践

var() 函数的必要性：始终记住，当您希望通过JavaScript将一个CSS变量的值设置为另一个CSS变量的引用时，必须使用'var(--variable-name)'这种格式。直接使用变量名字符串是无效的。
语义化变量命名：为CSS变量选择有意义的名称，如--primary-color、--font-size-large，而不是--red、--onpxfont。这有助于提高代码的可读性和可维护性。
回退值：var()函数支持回退值，例如var(--undefined-variable, #ccc)。如果--undefined-variable未定义，则会使用#ccc。这在处理可能缺失的变量时非常有用。
管理活动状态：在示例中，我们通过添加/移除active类来管理用户界面的视觉状态。这是一种常见的做法，可以清晰地分离样式和行为。
事件委托：对于大量相似的交互元素（如字体大小选项），可以考虑使用事件委托，将事件监听器添加到它们的共同父元素上，从而减少内存开销和提高性能。
*数据属性（`data-）**：在HTML元素上使用data-*属性来存储与JavaScript交互相关的数据（如data-font-var`），可以使HTML和JavaScript之间的耦合更松散，代码更清晰。
DOMContentLoaded：确保在DOM完全加载后再执行JavaScript代码，以避免因元素未加载而导致的错误。