CSS自定义属性（CSS变量）

除了sass,less等预编译器外，css自身也支持定义变量

html

<section><i></i><div>test test test test test test test test test test test test test test test test test test test test test</div>
</section><div id="test"><div id="test__title">font-size:28px</div>
</div>

css

/*全局变量*/
:root {--bgcolor: yellow;--sec-color:blue;--font-size:22px;--quanjv:1;    /*[JS] getComputedStyle(document.body).getPropertyValue('--quanjv')//'1'   */
}section {background: var(--bgcolor);/*取--bgcolor的值*/color:var(--sec-color,blue);/*取--sec-color的值，如果没有，则使用默认值（blue）*/--multy:20;width: calc(var(--font-size) * var(--multy)*1.1);/*多个变量计算*/
}section:after{content: '';display: block;clear: both;
}section i {width: 100px;height: 100px;background: currentColor;/*使用默认颜色，取color的值，没定义取父元素的color*/display: inline-block;float: left;border-radius: 50%;shape-outside: circle();margin: 10px;
}/*局部变量*/
section div {word-break: break-all;font-size:var(--font-size,14px);/*找不到该变量，不在变量的作用域,使用默认值14px*/
}#test__title{font-size:var(--font-size,10px);/*使用局部变量,在下方*/
}#test{--font-size:28px;/*定义局部变量*/--jubu:2;/*[JS]  getComputedStyle(document.body).getPropertyValue('--quanjv')    =  ''  ，无法获取；getComputedStyle(document.getElementById('test')).getPropertyValue('--jubu')    =   "2"*/
}@supports(--a:0){/*支持*/
}@supports(not(--a:0)){/*不支持*/
}

还可以JS操作

//改变变量
document.documentElement.style.setProperty('--sec-color','red');//JS操作//获得变量
getComputedStyle(document.body).getPropertyValue('--quanjv');//1//获取支持性
if(window.CSS&&window.CSS.supports&&window.CSS.supports('--a',0)){console.log('support')}else{console.error('not support')}

CSS自定义属性（CSS变量）相关推荐

css的属性是变量是怎么表达,CSS自定义属性（变量）
Github上有个叫electron-api-demos的项目,看代码的时候发现了这么一个css文件(variables.css): :root { --color: hsl(0,0%,22%); - ...
html avatar属性,CSS自定义属性在组件开发中的使用
在图解CSS系列的<CSS自定义属性>一文中,对CSS的自定义属性做过深入的阐述.如果你阅读过这篇文章,应该对CSS自定义属性有所了解,也能体会到该特性的强大之处.今天,CSS自定义属性可 ...
备忘录吕吕没有备忘录十新建_一份备忘单，可帮助您记住CSS自定义属性
备忘录吕吕没有备忘录十新建 CSS custom properties, also known as CSS variables, represent custom properties that c ...
css expressionr,CSS自定义属性expression_r
CSS的出现使网页制作者在对网页元素的控制方便许多,当然,有利必有弊,CSS只能对颜色.大小.距离等静态样式有效,对于要实现某些html元素的动态样式就显得有些力不从心.有了CSS的自定义属性expr ...
react css多个变量_如何使用CSS变量和React上下文创建主题引擎
react css多个变量 CSS variables are really cool. You can use them for a lot of things, like applying the ...
无法获取未定义或 null 引用的属性“text”_【CSS】是时候开始用 CSS 自定义属性了...
自定义属性(有时候也被称作CSS变量或者级联变量)是由CSS作者定义的,它包含的值可以在整个文档中重复使用.由自定义属性标记设定值(比如:--main-color: black;),由var() 函数 ...
win10 html css,Win10创造者更新:Edge支持CSS自定义属性
下月即将推出的Win10创造者更新正式版中,微软将为默认浏览器MicrosoftEdge带来更多的扩展支持,并默认阻止Flash内容运行.而现在,微软又宣布,Edge浏览器正式支持CSS自定义属性. ...
CSS 自定义属性 -- 使用 JS 和不使用 JS
你曾想过在页面加载过后去修改 Sass 或 Less 的变量值么? 我曾经尝试过, 但并没有成功, 因为当预处理的代码编译成了 CSS, 它的变量就不再是变量了, 然而, 自定义属性就没有这样的限制. ...
属性值动态调整_【第1603期】CSS 自定义属性：使用篇
前言好的文章值得多看两眼.今日早读文章由@kmokidd翻译分享. 正文从这开始-- 可读性更高的 CSS 代码在读过 [第1596期]CSS 自定义属性:基础篇后,我们可以开始着手优化代码了,通 ...

CSS自定义属性（CSS变量）

CSS自定义属性（CSS变量）相关推荐

最新文章

热门文章