小程序修改元素样式方法

最新推荐文章于 2024-07-21 14:30:00 发布
最新推荐文章于 2024-07-21 14:30:00 发布
阅读量2.1k 收藏 1
点赞数
分类专栏： WeChat javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43447509/article/details/107720335
版权
本文介绍了在微信小程序中，由于无法直接操作DOM，如何通过特定方法来实现元素样式的修改。内容涵盖Wxml和Js的相关知识。
摘要由CSDN通过智能技术生成

前言：小程序是无法操作DOM元素的 需要通过setData()方法实现修改元素样式

Wxml

<!-- 将样式属性值替换为变量-->
<view style="display: {
      {
      block}}">显示</view
最低0.47元/天 解锁文章
sun_wei_tao
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序获取修改元素的样式
weixin_43977647的博客
02-09 8291
1.获取元素的样式 使用wx.createSelectorQuery()来获取元素 这里需要注意的是 1.获取元素样式的函数应该放在onReady：function(){}这个里面 2.获取元素的代码异步执行，想同步执行需要把后面的代码放在setTimeout中 let that = this const query = wx.createSelectorQuery() query.select(...
微信小程序开发——wx:for循环渲染元素如何修改点击样式
前端专栏
04-06 1万+
循环渲染的导航栏，每个子元素都需要通过点击事件函数修改样式，但因为循环渲染，每个子元素的点击事件函数是一样的，所以不能分别修改对应子元素的样式。通过本文，你将了解微信小程序中循环渲染wx:for的子元素如何修改点击样式
微信小程序开发：DOM 相关 API 使用详解
最新发布
xingyu_qie的专栏
07-21 2461
在微信小程序开发中，与传统的网页开发相比，由于安全性和性能考虑，访问 DOM（文档对象模型）是受限的。然而，微信小程序提供了一些特定的 API，使开发者能够处理和操作视图层，实现丰富的用户交互体验。
小程序 swiper仿tab切换----动态绑定事件+获取wxml节点+在wxs里修改节点样式
青蛙king的博客
08-27 1021
一、先看效果： （不知道为啥录屏后的gif视频总会偏移，令人烦恼，望大神告知~） 二、用到的知识点枚举 scroll-view，详情请戳此：https://blog.csdn.net/mChales_Liu/article/details/99859680 swiper + swiper-item，详情请戳此：https://blog.csdn.net/mChales_Liu/a...
微信小程序之Js修改元素样式
不再更新，新博客 chgl16.space
09-10 3万+
微信小程序和普通的前端开发有很多不同。 后者修改样式js可以操作DOM，即 document.getElementById(id).style.property=new style 但是微信的js是没有DOM操作这功能的，也就没有  element.style.property=new style 这种方法（使用会报错，没定义）   正确方法： &lt;text style="color...
疑难杂症之——小程序样式动态修改
m0_71071511的博客
07-10 5148
动态更新小程序部分组件样式
解决微信小程序dom的获取问题，动态修改CSS样式
m0_57103192的博客
06-14 2332
哥们儿用UNIAPP开发微信小程序的过程中，遇到这么一个组件使用的是插件市场中的一个案例，作者使用的是vant的Circle 环形进度条哥们儿开心的很呀，这东西粘贴一下改改数，一天的工作量不就达成了吗？但是因为种种原因，我还是太高估自己了，vant引入不进去！还好哥脑瓜子转得快，既然中心是个图层，正好盖到了进度条的内圈。那我只要把环形进度条删了，用background: conic-gradient把这玩意写成个中心旋转的饼图，不是一个效果吗！？
微信小程序 JS动态修改样式的实现方法
10-17
总结起来，微信小程序的JS动态修改样式是通过绑定数据到样式属性，并利用`this.setData()`方法更新数据来实现的。这种方式使得开发者能够灵活地构建动态且交互丰富的用户体验。在实践中，可以根据需求选择合适的方法...
微信小程序 JS动态修改样式的实现代码
10-20
微信小程序通过绑定数据动态修改样式的实现方法，为开发者提供了一种灵活且高效的方式来调整应用的外观。掌握这种方法，可以让小程序更加生动和互动，提高用户的满意度和参与度。希望本文的内容能够帮助大家在开发...
JS的DOM操作——style的操作
m0_59345890的博客
07-24 6447
window对象为我们提供了一个方法——getComputedStyle(当前元素节点)，返回css样式对象，里面包含了我们在css里面设置的属性的属性值。可以看到这个对象里面包含的属性有很多，并且能够看到我们设置的background-color的属性值，rgb(255,0,0)就是红色。我只能说没有办法，但是能够获取到css里面属性的值，想要操作属性还是只能用获取的元素点（·）style.xx(需要设置或修改的属性)常见操作获取的元素点（·）style.xx(需要设置或修改的属性)...
微信小程序学习
weixin_55935744的博客
11-09 4369
微信小程序学习
微信小程序js添加css属性
servicesYY的博客
06-08 1万+
index.wxml &lt;view class="page" style="background-color:{{pageBackgroundColor}}" &gt; &lt;button bindtap="changeColor" hover-class="none"&gt;点击修改背景颜色&lt;/button&gt; &lt;/view&gt; i
微信小程序 组件的样式修改
mossbaoo的博客
01-18 7446
 在开发微信小程序时，我们在使用一些组件的时候，总会遇到设计稿与官方提供的组件样式不太一样的情况，需要想办法修改组件的样式。目前只记录了两个组件的修改方法：switch、checkbox switch 1. 大小 /* swtich整体大小 */ .wx-switch-input{ width: 100rpx !important; height: 57rpx !importa...
微信小程序 动态绑定 style 样式 和class
热门推荐
Alex81320的博客
10-31 6万+
&lt;view class="changeImageView" style="display:{{displayPhoto}}" &gt; &lt;view class="operbtn"&gt;测试&lt;/view&gt; &lt;/view&gt; &lt;view class="section section_gap"&gt; &a
微信小程序wxss---对应css样式（动态修改css样式）
qq_41797053的博客
09-17 2万+
微信中wxss有些类似于scss，可以引用外联样式。但是不知道怎么继承css样式 下图是微信中动态绑定css样式，实现css样式的动态修改
微信小程序Js修改元素样式
05-24
要修改小程序中元素的样式，可以使用 WXML 和 WXSS。WXML 是小程序的视图层语言，类似于 HTML，用于描述页面结构。WXSS 则是小程序的样式语言，类似于 CSS，用于描述页面的样式。以下是修改元素样式的一些常见方法。 1. 使用内联样式 在 WXML 中，可以为元素添加 style 属性，来设置元素的内联样式。例如： ``` <view style="color: red; font-size: 16px;">这是一段红色的文字</view> ``` 2. 使用 class 在 WXSS 中，可以定义一些 class，然后在 WXML 中为元素添加 class 属性，来应用这些样式。例如： 在 WXSS 中： ``` .red { color: red; font-size: 16px; } ``` 在 WXML 中： ``` <view class="red">这是一段红色的文字</view> ``` 3. 动态修改样式 在小程序中，可以使用 setData 方法来动态修改元素的样式。例如： 在 WXML 中： ``` <view style="{{ textStyle }}">这是一段文字</view> ``` 在 JS 中： ``` Page({ data: { textStyle: 'color: red; font-size: 16px;' }, changeTextStyle() { this.setData({ textStyle: 'color: blue; font-size: 14px;' }) } }) ``` 在上面的例子中，我们在 data 中定义了一个 textStyle 变量，并将其绑定到了 view 元素的 style 属性上。然后，在 JS 中，我们定义了一个 changeTextStyle 方法，用来动态修改 textStyle 变量的值。当调用 changeTextStyle 方法时，会触发页面重新渲染，从而更新 view 元素的样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值