JavaScript 30 天编码挑战——第 3 天：用 JavaScript 变量和 CSS 变量畅玩

欢迎来到 JavaScript 30 天编码挑战的第 3 天！今天，我们将深入探究 JavaScript 变量和 CSS 变量的奇妙世界，了解它们如何让我们的代码更加强大灵活。

JavaScript 变量

JavaScript 变量用于存储值，让我们能够在代码中跟踪和操作数据。它们通过 let 或 const 声明，后跟变量名称和赋值操作符 (=)。例如：

let name = "John Doe";
const age = 30;

JavaScript 变量是动态类型的，这意味着它们可以存储任何类型的数据，包括字符串、数字、布尔值、数组和对象。变量名称应性并遵循驼峰命名约定。

CSS 变量

CSS 变量，也称为 CSS 自定义属性，允许我们使用 JavaScript 动态设置 CSS 属性值。它们使用 -- 前缀声明，后跟变量名称和赋值操作符。例如：

:root {
  --primary-color: #ff0000;
  --font-size: 16px;
}

CSS 变量与 JavaScript 变量非常相似，它们也可以存储任何类型的值。可以通过 JavaScript 使用 document.documentElement.style.getPropertyValue() 方法访问和修改它们。

用 JavaScript 变量和 CSS 变量畅玩

现在，让我们结合 JavaScript 变量和 CSS 变量，打造一个交互式的 Web 应用程序。我们将创建一个带有文本输入框和按钮的页面，允许用户更改文本的颜色和字体大小。

const input = document.querySelector("input");
const button = document.querySelector("button");

button.addEventListener("click", () => {
  const color = input.value;
  document.documentElement.style.setProperty("--primary-color", color);
});

:root {
  --primary-color: #000000;
  --font-size: 16px;
}

p {
  color: var(--primary-color);
  font-size: var(--font-size);
}

在这个应用程序中，我们使用 JavaScript 的 addEventListener 方法监听按钮的点击事件。当按钮被点击时，它会获取文本输入框中的值（文本颜色），然后使用 document.documentElement.style.setProperty() 方法将该值分配给 --primary-color CSS 变量。文本段落的颜色将动态更新，反映输入的颜色值。

总结

JavaScript 变量和 CSS 变量是强大的工具，可让我们在代码中存储和操作数据。通过结合使用这些变量，我们可以创建交互式、可定制的 Web 应用程序。随着 JavaScript 30 天编码挑战的继续，我们将继续探索 JavaScript 的更多强大功能和技术。