在前端开发中，CSS 和 JavaScript 是两个非常重要的技术，它们各自有着不同的职责，在实际开发过程中，我们经常会遇到需要在 CSS 中使用 JavaScript 变量的情况，下面将详细介绍如何在 CSS 中引用 JavaScript 变量的方法，并给出具体的代码示例。
方法一：通过:root 选择器定义全局 CSS 变量
1、定义 CSS 变量：在 CSS 中使用:root 选择器定义一些全局的 CSS 变量，这些变量可以在后续的样式中使用。
:root {
--main-color: red;
--font-size: 16px;
}
2、在 JavaScript 中修改 CSS 变量：在 JavaScript 中可以通过document.documentElement.style.setProperty 方法来修改这些 CSS 变量的值。
document.documentElement.style.setProperty('--main-color', 'blue');
document.documentElement.style.setProperty('--font-size', '20px');
3、在 CSS 中使用 CSS 变量：在 CSS 中使用var() 函数来引用这些 CSS 变量。
body {
color: var(--main-color);
font-size: var(--font-size);
}
方法二：通过元素的属性设置 CSS 变量
1、在 HTML 中设置属性：在 HTML 元素上设置一个自定义属性，例如data-color。
<div id="myElement" data-color="red"></div>
2、在 CSS 中使用属性选择器：在 CSS 中使用属性选择器来根据元素的自定义属性设置样式。
#myElement[data-color="red"] {
color: red;
}
3、在 JavaScript 中动态设置属性：在 JavaScript 中可以通过element.setAttribute 方法来动态设置元素的自定义属性。
const element = document.getElementById('myElement');
element.setAttribute('data-color', 'blue');
方法三：通过 JavaScript 动态插入样式
1、：在 JavaScript 中创建一个<style> 元素，并将其添加到文档的<head> 中。
const style = document.createElement('style');
document.head.appendChild(style);
2、：通过style.sheet.insertRule 方法向<style> 元素中添加样式规则。
style.sheet.insertRule(#myElement { color: red; }, 0);
3、动态更新样式规则：可以根据需要动态更新样式规则。
style.sheet.insertRule(#myElement { color: blue; }, 1);
方法四：使用 CSS 预处理器（如 Sass）
1、安装 Sass：需要安装 Sass，可以使用以下命令安装：
npm install -g sass
2、编写 Sass 文件：在 Sass 文件中，可以使用@if、@else if 和@else 等指令来根据条件设置样式。
$color: red;
@if $color == red {
body {
color: red;
}
} @else if $color == blue {
body {
color: blue;
}
} @else {
body {
color: black;
}
}
3、编译 Sass 文件：使用 Sass 编译器将 Sass 文件编译成 CSS 文件。
sass style.scss style.css
4、在 HTML 中引入 CSS 文件：在 HTML 中引入编译后的 CSS 文件。
<link rel="stylesheet" href="style.css">
方法五：使用 CSS 变量和 JavaScript 的结合
1、定义 CSS 变量：在 CSS 中定义一些 CSS 变量。
:root {
--color: red;
}
2、在 JavaScript 中修改 CSS 变量：在 JavaScript 中通过document.documentElement.style.setProperty 方法来修改 CSS 变量的值。
document.documentElement.style.setProperty('--color', 'blue');
3、在 CSS 中使用 CSS 变量：在 CSS 中使用var() 函数来引用 CSS 变量。
body {
color: var(--color);
}
示例代码
以下是一个完整的示例代码，展示了如何在 CSS 中引用 JavaScript 变量：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 引用 JS 变量</title>
<style>
:root {
--main-color: red;
--font-size: 16px;
}
body {
color: var(--main-color);
font-size: var(--font-size);
}
</style>
</head>
<body>
<p>Hello, World!</p>
<button onclick="changeStyle()">Change Style</button>
<script>
function changeStyle() {
document.documentElement.style.setProperty('--main-color', 'blue');
document.documentElement.style.setProperty('--font-size', '20px');
}
</script>
</body>
</html>
在这个示例中，当页面加载时，文本的颜色为红色，字体大小为 16px，当点击按钮时，文本的颜色会变为蓝色，字体大小会变为 20px。
