当前位置: 首页 > Web前端 > CSS

CSS变量

时间:2023-03-30 19:00:53 CSS

参考链接:阮一峰css笔记:http://www.ruanyifeng.com/blo...MDNCSS变量教程:https://developer.mozilla.org...浏览器支持:主流现代浏览器基本支持使用:1.定义:使用--符号声明一个css变量,变量的值可以是任意值:root{--main-bg-color:brown;}变量名区分大小写,有作用域。通用css变量全局使用,放在:root2.Scope:root{--color:red;}div{--color:blue;}.box{height:100px;宽度:100px;background-color:var(--color);

运行html代码得到一个蓝色的div和红色的p标签,受影响范围的影响与样式的优先级相同。获取变量时,获取到最准确作用域下的变量,id>class>label>globalusescope,我们可以做这两个常用操作:(1)媒体查询修改变量@mediascreenand(max-width:375px){主体{--padding:5px;}}@mediascreenand(max-width:1080px){body{--padding:15px;}}(2)jsswitchclassname改变主题color.white-theme{--bg-color:#fff;--color:#333;}.black-theme{--bg-color:#333;--颜色:#fff;}通过js切换类名,可以切换不同的变量。需要注意的是主题类需要在节点的最外层,比如body或者app类。其次,凡是需要主题色的地方都需要用到变量3、调用变量:使用var()函数和变量名来调用变量。red{color:var(--theme-color);}变量只能作为属性值,不能作为属性名4、默认值和向后兼容性:var()函数可以接受第二个参数,作为找不到变量时的默认值。red{color:var(--theme-color,red);}。red{color:var(--theme-color,var(--color,red));}我们无法保证用户使用的设备支持CSS变量的特性,因此我们可以在必要时进行向后兼容处理:如果var无效,则使用之前的属性值\.red{color:red;color:var(--theme-color);}5.js操作变量(1)检查css变量是否支持constisSupported=window.CSS&&window.CSS.supports&&window.CSS.supports('--a',0);if(isSupported){/*支持*/}else{/*不支持*/}(2)操作变量//设置document.body。style.setProperty("--color","re??d");//读取document.body.style.getPropertyValue("--color");//删除document.body.style.removeProperty("--color");很明显,js操作变量需要在文档环境下,在一些特殊的场合是不能开发的,比如uniapp中的多终端。