【css】css自定义属性

声明

声明：--variable-name: variable-value;

变量的值可以是颜色、字符串、多个值的组合等:

:root {
    --body-color: #fff;
    --body-bg: rgba(255,255,255,0.8);
    --p-font-size: 1rem;
    --p-padding: 10px 5px;
    --img-alt: "no images";
    --img2-alt: var(--img-alt) 'img2';
    --margin-top: calc(1vh + 10px);
}

使用

使用： property: var(--variable-name [, declaration-value]);

p {
    --p-color: red;
    color: var(--p-color, black);
}

注：

• 声明和使用必须放在{}代码块里
• 当变量没有定义的时候，会使用declaration-value
• 变量名是大小写敏感的
• 不能作为图片地址使用，如url(var(--image-url))不会生效
• 不能作为CSS属性名称使用，如var(--name): 10px;

作用域

在 :root代码块里声明的变量是全局变量。

在特定的元素下声明的是局部变量。

注：局部变量会覆盖全局变量

:root {
    --bg-color: red;
}
div.box {
    --bg-color: green;
    background-color: var(--bg-color);
}
/*div.box 的背景颜色是 green*/

calc()

div {
    --font-size: 10;
    font-size: var(--font-size)px;
}

此时 div 里的文字大小不是我们所认为的 30px，而是浏览器默认的大小。这是因为变量转换的时候末尾会带上空格，var(--font-size)转变成了30 px。

解决方法一：声明时带上单位 --font-size: 30px;。

解决方法二：使用calc() 计算属性 calc(var(--font-size) * 1px);

注：最后不要用calc()进行复杂的计算。

js 获取与赋值

:root{
     --bg-color: red;
}

 // 获取
getComputedStyle(document.documentElement).getPropertyValue('--bg-color')  // lightblue
        
 // 赋值
document.documentElement.style.setProperty('--bg-color', 'green')