小程序中使用小程序中使用css var变量变量(使使js可以动态设置可以动态设置css样式属性样式属性)
主要介绍了小程序中使用css var变量,使js可以动态设置css样式属性,文中通过示例代码介绍的非常详细,对
大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
使用sass,stylus可以很方便的使用变量来做样式设计,其实css也同样可以定义变量,在小程序中由于原生不支持动态css语
法,so,可以使用css变量来使用开发工作变简单。
基本用法基本用法
基础用法
<!--web开发中顶层变量的key名是:root,小程序使用page-->
page {
--main-bg-color: brown;
}
.one {
color: white;
background-color: var(--main-bg-color);
margin: 10px;
}
.two {
color: white;
background-color: black;
margin: 10px;
}
.three {
color: white;
background-color: var(--main-bg-color);
}
提升用法
<div class="one">
<div class="two">
<div class="three">
</div>
<div class="four">
</div>
<div>
</div>
.two { --test: 10px; }
.three { --test: 2em; }
在这个例子中,var(--test)的结果是:
class="two" 对应的节点: 10px
class="three" 对应的节点: element: 2em
class="four" 对应的节点: 10px (继承自父级.two)
class="one" 对应的节点: 无效值, 即此属性值为未被自定义css变量覆盖的默认值
上述是一些基本概念,大致说明css变量的使用方法,注意在web开发中,我们使用:root来设置顶层变量,更多详细说明参考
MDN的文档
妙用妙用css变量变量
开发中经常遇到的问题是,css的数据是写死的,不能够和js变量直通,即有些数据使用动态变化的,但css用不了。对了,可
以使用css变量试试呀
js
// 在js中设置css变量
let myStyle = `
--bg-color:red;
--border-radius:50%;
--wid:200px;
--hgt:200px;
`
let chageStyle = `
--bg-color:red;
--border-radius:50%;
--wid:300px;
评论2
最新资源