通过CSS向JS传参的方法

通过 CSS 向 JS 传参的方法，可以使用 CSS 变量（CSS Variables）来实现。CSS 变量是一种新的 CSS 特性，可以让开发者定义自己的 CSS 属性，以便在整个文档中重复使用。这种特性可以提高代码的可读性和可维护性，同时也可以减少代码的重复性。下面是一些关于 CSS 变量的示例说明。

定义 CSS 变量

可以使用 -- 开头的名称来定义 CSS 变量。例如：

:root {
  --main-color: #ff0000;
}

上述代码中，使用 :root 选择器来定义 CSS 变量 --main-color，其值为 #ff0000。

使用 CSS 变量

可以使用 var() 函数来使用 CSS 变量。例如：

h1 {
  color: var(--main-color);
}

上述代码中，使用 var() 函数来使用 CSS 变量 --main-color，以便设置 h1 元素的颜色。

示例说明

下面是两个示例，演示如何使用 CSS 变量来向 JS 传参。

示例一：使用 CSS 变量设置 JS 变量

<div id="box"></div>

:root {
  --main-color: #ff0000;
}

const box = document.getElementById('box');
const mainColor = getComputedStyle(document.documentElement).getPropertyValue('--main-color');
box.style.backgroundColor = mainColor;

上述代码中，使用 :root 选择器来定义 CSS 变量 --main-color，其值为 #ff0000。使用 getComputedStyle() 函数来获取元素的计算样式，然后使用 getPropertyValue() 函数来获取 CSS 变量的值，最后将其赋值给 JS 变量 mainColor，以便设置元素的背景颜色。

示例二：使用 CSS 变量设置 JS 函数参数

<div id="box"></div>

:root {
  --main-color: #ff0000;
}

function setBoxColor(color) {
  const box = document.getElementById('box');
  box.style.backgroundColor = color;
}

const mainColor = getComputedStyle(document.documentElement).getPropertyValue('--main-color');
setBoxColor(mainColor);

上述代码中，使用 :root 选择器来定义 CSS 变量 --main-color，其值为 #ff0000。使用 getComputedStyle() 函数来获取元素的计算样式，然后使用 getPropertyValue() 函数来获取 CSS 变量的值，最后将其作为参数传递给 JS 函数 setBoxColor()，以便设置元素的背景颜色。