css动态传参，attr的妙用

CSS 动态传参主要是通过 CSS 的自定义属性（CSS Variables）或者是通过 attr() 函数来实现。

1. 使用 CSS 自定义属性 (CSS Variables)：

CSS 自定义属性可以在不同的选择器中定义相同的变量，并在文档的不同部分重复使用。

:root {
  --primary-color: #333;
}
 
div {
  color: var(--primary-color);
}

在这个例子中，我们定义了一个名为 --primary-color 的变量，并在 div 选择器中使用它。然后，我们可以在 JavaScript 中动态地改变这个变量的值：

document.documentElement.style.setProperty('--primary-color', 'red');

2. 使用 attr() 函数：

CSS attr() 函数可以获取 HTML 元素的属性值，并将其用作 CSS 的属性值。

div::before {
  content: attr(data-before);
}

在这个例子中，我们使用 attr() 函数获取 div 元素的 data-before 属性的值，并将其作为 ::before 伪元素的 content 属性的值。然后，我们可以在 JavaScript 中动态地改变这个属性的值：

document.querySelector('div').setAttribute('data-before', 'Hello, World!');

以上就是 CSS 动态传参的两种方法。