小程序中使用css var变量(使js可以动态设置css样式属性) |
您所在的位置：网站首页 › 帕雷思理发器怎么样 › 小程序中使用css var变量(使js可以动态设置css样式属性) |
小程序中使用css var变量(使js可以动态设置css样式属性)
|
小程序中使用css var变量(使js可以动态设置css样式属性)
发布时间：2020-08-21 12:44:10
来源：脚本之家
阅读：440
作者：天天修改
栏目：web开发
使用sass,stylus可以很方便的使用变量来做样式设计，其实css也同样可以定义变量，在小程序中由于原生不支持动态css语法，so，可以使用css变量来使用开发工作变简单。 基本用法 基础用法 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); }提升用法 .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; --hgt:300px; ` Page({ data: { viewData: { style: myStyle } }, onLoad(){ setTimeout(() => { this.setData({'viewData.style': chageStyle}) }, 2000); } })wxml wxss /* 使用var */ .my-view{ width: var(--wid); height: var(--hgt); border-radius: var(--border-radius); padding: 10px; box-sizing: border-box; background-color: var(--bg-color); transition: all 0.3s ease-in; } .my-view image{ width: 100%; height: 100%; border-radius: var(--border-radius); }通过css变量就可以动态设置css的属性值 代码片段 https://developers.weixin.qq.com/s/aWfUGCmG7Efe github 小程序演示
到此这篇关于小程序中使用css var变量的文章就介绍到这了,更多相关小程序使用css var变量内容请搜索亿速云以前的文章或继续浏览下面的相关文章希望大家以后多多支持亿速云！ 免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：[email protected]进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。 小程序 css var 上一篇新闻：layer.confirm点击第一个按钮关闭弹出框的方法 下一篇新闻：Python最小二乘法矩阵
10000元红包免费领
红包可用于（云服务器、高防服务器、裸金属服务器、高防IP、云数据库、CDN加速）购买和续费 猜你喜欢 php通过mysql导入的数据操作solr7.5详细步骤 phpstorm使用ftp工具 phpstorm基本配置 phpredis -- Redis编译安装，PHP 7 安装 Redis 扩展 php的基础知识 zabbix 监控phpfpm_status 分享PHP中的10个实用函数 redis的php驱动两种方式 php json_encode 将数组转换成json格式数据出错 php使用zeromq |
【本文地址】
今日新闻 |
推荐新闻 |