css自定义属性

时间：2023-03-30 22:15:24 CSS

基本用法1.定义css自定义属性，也称为css变量，与其他编程语言变量一样，让css具有编程能力。2.声明及使用使用：需要用两个减号（--）开头，其他与变量定义规则一致，区分大小写。:root{--color:red;}使用：使用时用var()函数包裹。div{color:var(--color)}3variableundefinedandwrongdefinitionifweusevariableundefined然后使用下面的值作为属性值body{background:var(--bg-color,black)}if如果变量定义我们使用的是错误的，该属性将使用默认值body{--bg-color:20px;background:var(--bg-color,black)}上面我们定义了--bg-color，但是background的属性值不匹配，所以body的background最终取值为它的默认值透明继承和作用域css变量在全局作用域和局部作用域之间有区别。:root中定义的是全局作用域，可以访问整个文档。某个标号内定义的变量是该标号内的局部变量，外部无法访问。:root{--color:red//全局css变量--color}.box{--color:blue//局部变量--color}body{//因为body无法访问box中定义的--color，所以最后一个有效值为红色color:var(--color)}继承content1

content2

js操作自定义属性:root{--color:red;}letroot=document.documentElement//读取letrootStyle=window.getComputedStyle(root);letcolorVar=rootStyle.getPropertyValue('--color').trim();console.log(colorVar)//改变root.style.setProperty('--color','blue')console.log(colorVar)//删除root.style.removeProperty('--color')console.log(colorVar)与Sass变量有更多的范围。js是可操作可继承的。无需编译。使用场景没有编辑环境。项目是纯静态页面，但需要统一颜色、字体、字号、字重等，可以使用css变量方便统一修改，需要运行时动态改变项目的属性，比如主题变化等等。