CSS自定义属性的设置与获取

CSS自定义属性（也称为CSS变量）的设置和获取在CSS和JavaScript中都有不同的方法。下面分别介绍如何在CSS中设置自定义属性，以及如何在JavaScript中设置和获取这些属性。

在CSS中设置自定义属性

在CSS中，自定义属性是通过在选择器内部使用--前缀来声明的。这些属性通常定义在:root伪类中，以便在整个文档范围内使用，但也可以定义在任何其他选择器中以限制其作用域。

:root {
  --main-bg-color: coral;
  --padding-size: 10px;
}

.container {
  --container-bg-color: lightblue; /* 只在这个容器内有效 */
}

在JavaScript中设置和获取自定义属性

设置自定义属性

在JavaScript中，你可以使用element.style.setProperty()方法来设置自定义属性的值。这个方法接受三个参数：属性名（不带--前缀）、值和一个可选的优先级字符串（如'important'）。

// 设置全局自定义属性
document.documentElement.style.setProperty('--main-bg-color', 'pink');

// 设置特定元素的自定义属性
var container = document.querySelector('.container');
container.style.setProperty('--container-bg-color', 'skyblue');

获取自定义属性

要获取自定义属性的值，你可以使用window.getComputedStyle()方法结合getPropertyValue()方法。注意，获取自定义属性时需要包括--前缀。

// 获取全局自定义属性
var mainBgColor = getComputedStyle(document.documentElement).getPropertyValue('--main-bg-color');
console.log(mainBgColor); // 输出: pink

// 获取特定元素的自定义属性
var containerBgColor = getComputedStyle(container).getPropertyValue('--container-bg-color');
console.log(containerBgColor); // 输出: skyblue

在HTML标签中设置CSS自定义属性

在HTML标签中设置CSS自定义属性的方法和在HTML标签中设置普通的CSS属性的方法是一样的，直接将要设置的属性写在style属性中即可，例如：

<div style="--color: deepskyblue;">
    <img src="1.jpg" style="border: 10px solid var(--color);">
</div>

注意事项

• 当你使用element.style.setProperty()设置自定义属性时，这些属性将直接应用于元素的style对象，但它们不会出现在CSS规则中，也不会被element.style直接列出（因为element.style只反映内联样式）。但是，getComputedStyle()能够获取到这些值。
• 自定义属性名（包括--前缀）在getPropertyValue()方法中是必需的。
• 自定义属性在CSS中定义时，其作用域遵循CSS的选择器规则。在JavaScript中设置时，它们通常被视为内联样式，但可以通过getComputedStyle()在文档中的任何地方查询。
• 自定义属性是区分大小写的，因此在JavaScript中设置和获取时需要注意。