小程序中使用css var变量(使js可以动态设置css样式属性)


Posted in Javascript onMarch 31, 2020

使用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;
--hgt:300px;
`
Page({
 data: {
  viewData: {
   style: myStyle
  }
 },
 onLoad(){
  setTimeout(() => {
   this.setData({'viewData.style': chageStyle})
  }, 2000);
 }
})

wxml

<!--将css变量(js中设置的那些)赋值给style-->
<view class="container">
 <view class="my-view" style="{{viewData.style}}">
  <image src="/images/abc.png" mode="widthFix"/>
 </view>
</view>

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变量(使js可以动态设置css样式属性)

到此这篇关于小程序中使用css var变量的文章就介绍到这了,更多相关小程序使用css var变量内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript中不等于的代码是什么怎么写
Dec 29 Javascript
jquery控制select的text/value值为选中状态
Jun 03 Javascript
Jquery Post处理后不进入回调的原因及解决方法
Jul 15 Javascript
javascript对中文按照拼音排序代码
Aug 20 Javascript
使用AJAX实现Web页面进度条的实例分享
May 06 Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
Feb 14 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
Apr 19 Javascript
webpack下实现动态引入文件方法
Feb 22 Javascript
vue filters的使用详解
Jun 11 Javascript
基于vue.js中关于下拉框的值默认及绑定问题
Aug 22 Javascript
jQuery中DOM操作原则实例分析
Aug 01 jQuery
JS前端使用canvas实现扩展物体类和事件派发
Aug 05 Javascript
功能完善的小程序日历组件的实现
Mar 31 #Javascript
小程序双头slider选择器的实现示例
Mar 31 #Javascript
JavaScript实现电灯开关小案例
Mar 30 #Javascript
javascript实现计算器功能
Mar 30 #Javascript
详解Webpack抽离第三方类库以及common解决方案
Mar 30 #Javascript
记一次react前端项目打包优化的方法
Mar 30 #Javascript
12 种使用Vue 的最佳做法
Mar 30 #Javascript
You might like
php 什么是PEAR?
2009/03/19 PHP
PHP中数组的分组排序实例
2014/06/01 PHP
Javascript常用运算符(Operators)-javascript基础教程
2007/12/14 Javascript
filters.revealTrans.Transition使用方法小结
2010/08/19 Javascript
jQuery1.6 使用方法一
2011/11/23 Javascript
js防止DIV布局滚动时闪动的解决方法
2014/10/30 Javascript
原生js实现autocomplete插件
2016/04/14 Javascript
学习AngularJs:Directive指令用法(完整版)
2016/04/26 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
2016/09/19 Javascript
JS访问DOM节点方法详解
2016/11/29 Javascript
js弹出窗口简单实现代码
2017/03/22 Javascript
jquery实现搜索框功能实例详解
2018/07/23 jQuery
webpack4 + react 搭建多页面应用示例
2018/08/03 Javascript
Vue.js下拉菜单组件使用方法详解
2019/10/19 Javascript
封装Vue Element的table表格组件的示例详解
2020/08/19 Javascript
Python正则表达式和re库知识点总结
2019/02/11 Python
python3下载抖音视频的完整代码
2019/06/05 Python
Pyqt5实现英文学习词典
2019/06/24 Python
Python处理session的方法整理
2019/08/29 Python
Python 矩阵转置的几种方法小结
2019/12/02 Python
python实现银行实战系统
2020/02/26 Python
python实现简单俄罗斯方块
2020/03/13 Python
VIVOBAREFOOT赤脚鞋:让您的脚做自然的事情
2017/06/01 全球购物
新英格兰最大的特色礼品连锁店:The Paper Store
2018/07/23 全球购物
Dodax奥地利:音乐、电影、书籍、玩具、电子产品等
2019/08/31 全球购物
No7 Beauty美国官网:英国国民护肤品牌
2019/10/31 全球购物
利用指针变量实现队列的入队操作
2012/04/07 面试题
软件测试英文面试题
2012/10/14 面试题
供应链金融服务方案
2014/05/25 职场文书
机关党员公开承诺书
2014/08/30 职场文书
医院护士党的群众路线教育实践活动对照检查材料思想汇报
2014/10/04 职场文书
2014年酒店前台工作总结
2014/11/14 职场文书
2015毕业生实习工作总结
2014/12/12 职场文书
2016公务员年度考核评语
2015/12/01 职场文书
Mysql官方性能测试工具mysqlslap的使用简介
2021/05/21 MySQL
mysql 生成连续日期及变量赋值
2022/03/20 MySQL