用易语言做网站如何,网站开发报价模板,网站建设推广案例,一流的龙岗网站制作目录 1 CSS变量的基本使用1.1 变量定义1.1 变量使用1.3 全局/局部变量 2 CSS变量的参数3 CSS变量的拼接和计算3.1 拼接3.2 计算 4 JS 修改 CSS变量 CSS 自定义属性#xff08;有时候也被称作CSS 变量或者级联变量#xff09;#xff0c;它的值可以在整个文档中重复使用。 复… 目录 1 CSS变量的基本使用1.1 变量定义1.1 变量使用1.3 全局/局部变量 2 CSS变量的参数3 CSS变量的拼接和计算3.1 拼接3.2 计算 4 JS 修改 CSS变量 CSS 自定义属性有时候也被称作CSS 变量或者级联变量它的值可以在整个文档中重复使用。 复杂的网站都会有大量的 CSS 代码通常也会有许多重复的值。举个例子同样一个颜色值可能在成千上百个地方被使用到如果这个值发生了变化需要全局搜索并且一个一个替换很麻烦哎。自定义属性在某个地方存储一个值然后在其他许多地方引用它。 1 CSS变量的基本使用
1.1 变量定义
CSS 变量名前面要加两根连词线 –
--color: #E6E6FA;
--height: 100px;1.1 变量使用
由 var() 函数来获取值比如
background-color: var(--color);
height: var(--height);CSS 变量名不能包含$[^(%等字符普通字符局限在只要是“数字[0-9]”“字母[a-zA-Z]”“下划线_”和“短横线-”这些组合 1.3 全局/局部变量
全局变量
:root :root 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说:root 表示 html 元素 在里面声明的变量下面的所有选择器都可以拿到 注与 scope 冲突
:root {--color: #E6E6FA;--height: 100px;
}.header-container {background-color: var(--color);height: calc(var(--height) * 1.5);
}局部变量
.header-container {--color: #E6E6FA;--height: 100px;background-color: var(--color);height: calc(var(--height) * 1.5);
}2 CSS变量的参数
var() 函数还可以使用第二个参数表示变量的默认值。如果该变量不存在就会使用这个默认值。
color: var(--foo, #7F583F);3 CSS变量的拼接和计算 如果变量值是一个字符串可以与其他字符串拼接 如果变量值是数值可以进行计算; 3.1 拼接
// 字符串
--bar: hello;
--foo: var(--bar) world;3.2 计算
:root {--height: 100px;
}.header-container {height: calc(var(--height) * 1.5);
}4 JS 修改 CSS变量
在开发过程中有时候我们需要根据不同的条件来动态修改样式这时候就需要使用JavaScript来实现。 具体来说我们可以通过 JavaScript 访问元素的 documentElement.style 属性然后使用 setProperty 方法来更改 CSS 变量的值
button clickchangeHeightChange Height/buttonscript setup
const changeHeight () {document.documentElement.style.setProperty(--height, 200px);
}
/scriptstyle
:root {--height: 100px;
}.header-container {height: var(--height);
}
/style
