css怎么传值给js

CSS 是用来设置网页样式和布局的语言，而 JavaScript 则是用来添加交互和动态行为的语言。有时候我们需要将 CSS 属性的值传递给 JavaScript，以便在 JavaScript 中使用。

在 CSS 中，我们可以使用 var() 函数来定义自定义属性。这些自定义属性可以在其他 CSS 属性值中使用，也可以使用 JavaScript 访问。例如：

:root {
  --color-primary: #007bff;
}

button {
  background-color: var(--color-primary);
}

在上面的代码中，我们定义了一个叫做 --color-primary 的自定义属性，将其值设置为蓝色。然后在按钮样式中，我们调用了这个自定义属性的值，用于设置按钮的背景颜色。

在 JavaScript 中，我们可以使用 getComputedStyle() 函数来获取计算后的 CSS 属性值。例如：

const button = document.querySelector('button');
const backgroundColor = getComputedStyle(button).getPropertyValue('--color-primary');
console.log(backgroundColor);

在上面的代码中，我们获取了按钮的计算后的背景颜色值，并将其存储在变量 backgroundColor 中。

以上就是如何将 CSS 值传递给 JavaScript 的方法，通过定义自定义属性并在 CSS 和 JavaScript 中使用，来实现 CSS 和 JavaScript 的无缝衔接，提升网页设计的灵活性和交互性。