微信小程序如何通过js操作wxmll的wxss属性

最新推荐文章于 2024-08-06 13:43:08 发布
最新推荐文章于 2024-08-06 13:43:08 发布
阅读量1.9w 收藏 2
点赞数
分类专栏： 微信小程序原生基础爬坑 文章标签： 微信小程序 如何通过js操作wxmll的wxss属性 数据绑定
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kerryqpw/article/details/78756342
版权
本文介绍了在微信小程序中，由于无法直接通过js操作wxml的wxss属性，因此提出了一种实现思路：通过在wxml标签内绑定js数据值，并在js中改变这些数据，从而达到动态改变wxss属性的效果。具体实现包括在wxml中设置内联样式，并在js中更新样式值，以实现点击触发选择地区弹窗的功能。
摘要由CSDN通过智能技术生成

微信小程序如何通过js操作html的css属性


      在web端、手机端、webApp中可以通过js获取dom的方式设置dom属性。

微信小程序中，不能通过这种方式进行操作。


      如何在微信小程序中在wxml中操作wxss的属性。


      实现思路：

      通过利用数据绑定实现动态改变样式，

      1、在wxxml标签内嵌css属性上绑定js的date值

      2、通过js中绑定css属性的date值改变wxml标签内嵌的css属性


实现效果：   点击所在地区，弹出选择地区的浮层



实现代码：

editAddress.wxml：


<view cla
了解本专栏 订阅专栏 解锁全文 超级会员免费看
慕容屠苏
关注
专栏目录
订阅专栏
微信小程序数据交互------WXS的使用
2301_76988707的博客
10-21 883
🎬越努力 ，越幸运。
【小程序 - 基础】WXML、WXSS语法以及小程序的配置、网络数据请求_03
青春木鱼的博客
09-28 2215
WXML、WXSS语法以及小程序的配置、网络数据请求
【微信小程序实战教程】之微信小程序中的 JavaScript
最新发布
柯晓楠
08-06 1879
小程序的开发框架被称为MINA框架，其框架结构如图1所示。图1 MINA框架结构通过上面的框架结构图，我们可以看到小程序的MINA框架有三个部分组成，首先是View视图层，其次是App Service逻辑层和Native系统层。小程序中所有的页面都在View视图层中，每个页面由WXML文件和WXSS文件来搭建页面视图的结构和展现样式。App Service逻辑层是由App Service线程来加载、运行的，其生命周期常驻内存。
微信小程序基本使用2：wxs，组件的使用以及弹窗、滚动条
HakerDONG的博客
01-10 1541
只有class选择器会有样式的隔离效果 id选择器 属性选择器 标签选择器 不受样式隔离限制。在小程序 properties 和 data 的数据用法相同 都是可以读写的 但是。数据的监听 用于监听和响应任何的属性和数据字段的变化 ，从而执行特定的操作。监听器使用observers定义，与methods同级，写需要监听的数据。可以在模版中内联少量处理脚本，丰富模板的数据预处理能力。在组件的js文件properties属性列表中定义参数名。，函数中写需要执行的操作；如果需要监听对象的属性，写。
微信小程序js控制变量实现动态更新wxss
Sakuramissing的博客
05-06 1787
有些情况下需要根据状态来控制wxss文件中的值，比如color，实现步骤如下 wxss： page{ --color--:rgba(56,168,255,1); --back_color--:rgba(56,168,255,0.2); } view{ background:var(--back_color--) ; } wxml： <switch style="--color--:{{color}};--back_color--:{{...
微信小程序 js wxml wxss 路由
meng1128的博客
09-12 284
wxml wx:for="{{}}" class="bg {{center}}"等模版语法 js （事件） 事件 属性传递 data-id 在 event 中获取 setData{} 跟新数据 ，获取数据 this.data.readMark wxss 蓝湖中android 设计图单位对应小程序中px,同样支持 calc(100vh - 44px); less 计算属性 ui 采用 vant ui 路由 微信小程序路由api 有 页面历史栈 准对页面栈,有不同的api, 传值有...
小程序wxs使用教程
2303_76218115的博客
03-28 2084
wxs是小程序的一种脚本语言，它类似JavaScript，但是与JavaScript有所不同。wxs是一种数据绑定和逻辑处理的语言，它可以在wxml中使用，并且可以在wxml中直接调用。使用wxs可以实现更高效、更灵活的数据处理和渲染。通过本篇博客的介绍，我们了解了原生小程序如何使用wxs以及传参等技术，可以更好地实现数据的处理和渲染。在使用wxs时，需要注意wxs模块中不能使用页面逻辑层的数据和方法，并且可以使用module.exports将模块中的方法暴露出来，以便在其他地方使用。
微信小程序~自定义属性设置和获取（data-）
weixin_30448603的博客
07-02 767
自定义属性语法以data-开头： <button data-info="自定义数据" bindtap="testClick">自定义属性测试</button> 无论你这样写data-info="..."还是这样写data-INFO="..."，获取值的时候都是这样： 获取： testClick(event){ const dataIn...
微信小程序实现通过js操作wxml的wxss属性示例
10-17
微信小程序实现动态样式的方法主要依赖于数据绑定，即在WXML标签中通过绑定一个JavaScript数据对象的属性值，来动态地改变标签的样式。这个过程实际上是通过改变数据对象的值，然后让小程序自动更新页面来完成样式的...
小程序中使用css var变量(使js可以动态设置css样式属性)
10-15
主要介绍了小程序中使用css var变量，使js可以动态设置css样式属性，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
微信小程序例子——实现button点击事件改变数据值
热门推荐
FutrueJet的博客
10-18 4万+
微信小程序例子——实现button点击事件改变数据值
微信小程序获取自定义属性的值
stromGui同视
10-30 1万+
之前写小程序用到自定义属性，今天说说所这个自定义属性吧，希望可以帮到各位兄弟。有个小坑得填填首先看看wxml<view class='box' bindtap='getValue'> <view class='first' data-num="1024" data-name="张三">第一个view</view> <view class='second' data-age="2017
wxss 点击样式_微信小程序点击控件修改样式实例详解
weixin_39706127的博客
12-20 311
微信小程序点击控件修改样式实例详解现在要在微信小程序中实现点击控件修改样式，如下：微信小程序中不支持直接操作dom，要实现这种效果，我们需要通过设置data，然后利用数据和界面的双向绑定来实现它。第一步：在wxss中定义被点击和未被点击的样式，如下：.service_selection .is_checked{border: 1px solid #FE0002 ;color: #FE0002 ;b...
获取对象CSS属性
liulipuo的专栏
05-07 797
//获取一个特定元素的样式属性function getStyle(elem,name){ //如果该属性存在于style中 则他最近被设置过 if(elem.style[name]){ return elem.style[name]; } //否则尝试IE方法 else if(elem.currentStyle){ return elem.currentStyl
微信小程序css篇----所有属性(按字母排列：c，d，e开头)
鎏嫣宫守护的博客
01-14 5765
d，e，开头的css属性在小程序里比较少，就放在一起了，先看图： 那先说c开头的属性： 1.caption-side：
微信小程序实现子组根据点击的列表id件向父组件操作数据渲染到另外一个详情页
m0_64000390的博客
02-14 418
微信小程序实现子组件向父组件传值并通过事件绑定操作父组件的数据渲染到第三个页面
【小程序从0到1】宿主环境｜WXML｜WXSS｜JS逻辑交互
Coding and studying
09-15 1万+
宿主环境（host environment）指的是程序运行所必需的依赖环境。例如： Android系统和IOS系统是两个不同的宿主环境。安卓版的微信App是不能在IOS环境下运行的，所以，Android是安卓软件的宿主环境，脱离了宿主环境的软件是没有任何意义的！
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

慕容屠苏

你的鼓励是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值