uniapp点击事件修改元素样式

最新推荐文章于 2024-02-22 10:43:28 发布
最新推荐文章于 2024-02-22 10:43:28 发布
阅读量1.3w 收藏 10
点赞数 2
分类专栏： uniapp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44691220/article/details/109819839
版权

1.要有一个dom元素，用ref绑定
在这里插入图片描述
2.获取到dom元素并操作样式
在这里插入图片描述

Remyme
关注
  • 2
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 12
    评论
专栏目录
uniapp小程序之自定义navbar封装、uniapp操作dom样式
可可的博客
11-08 1729
思路：获取当前设备的信息，重新绘制ui{{//是否显示返回按钮 // 1000 显示返回按钮 // 2000 不显示返回按钮 // 3000 自定义返回按钮方法，点击返回箭头后会发送一个backClick事件 backState : {} } , //导航字体颜色，字体颜色为白色的时候会把手机状态栏设置为白色，否则为黑色 fontColor : {} } , //标题 centerTitle : {return {
uniapp日历组件代码（样式有做修改，去掉农历）
02-18
uniapp日历组件代码（样式有做修改，去掉农历）
【uniapp】原生小程序以及uniapp中如何获取v-for列表中点击行的信息，以及改变每个点击的样式
ONLYSRY的博客
07-28 2596
原生小程序以及uniapp中如何获取v-for列表中点击行的信息，以及改变每个点击的样式。
uniapp修改内置样式（自带样式）
qq_55825114的博客
02-22 305
【代码】uniapp修改内置样式（自带样式）
在uni-app中，操作dom
xuyan5228的博客
12-07 1499
在uni-app中，你可以通过来选择和操作DOM元素。
uni-app 微信小程序 获取节点css布局
l963937050的博客
01-03 648
uni-app 获取节点css布局
uniapp 获取元素，通过style修改元素的样式
坐等夕阳落time的博客
02-01 2394
uniapp 获取元素，通过style修改元素的样式
Vue/uni-app动态修改元素的样式
qq_45155741的博客
09-30 2890
1.第一种是通过v-bind和三元表达式 <view class="tip" :style="{color:item.state === '已确认'?'#52c41a':'#f5653b'}">商家{{item.state}}订单</view> 2.第二种是通过data <!-- 底部工具栏 --> <view class="bottom_tools" :style="{bottom: propUpBottomHeight}"></view&g
uniapp动态修改元素节点样式
weixin_42349568的博客
08-19 1万+
一，通过style属性绑定来修改 第一步：肯定是需要获取元素节点 在uniApp项目中没有windouw对象，所以通过document不能直接获取dom节点，vue的refs只对自定义组件有效，对uniapp中的标签不生效。 查看uniapp官网有一个uni.createSelectorQuery() API；可以通过这个属性获取标签的样式，在通过动态绑定样式来修改； html: <button type="default" @click="handleFont">点击增大字体</butt
uniapp中获取dom元素的方法，更改dom元素颜色（遇坑记录）
weixin_45745641的博客
02-08 1万+
最近写uniapp，遇到一个需要获取到页面中dom元素，我第一反应是使用this.$ refs进行获取，于是我开心的使用this.$refs写了很多代码，使用h5调试的过程中没有发现任何问题，但后来真机调试的时候发现在app端无效，于是我查看文档发现了：非H5端只能用于获取自定义组件，不能用于获取内置组件实例（如：view、text）
DOM操作获取元素节点及切换元素属性值
z_2532040197的博客
07-14 1323
DOM 是document object model （文档对象模型 ），它是W3C产业联盟制定的浏览器对程序员提供的对HTML文档操作的接口；把文档中的代码翻译成一个对象模型。 在这个模型中 所有相关的标签属性注释文本等等12种数据 都翻译为一种类型的对象 统称节点对象。 这些对象之间在文档模型数据结构中存在某种关系: 根节点 父子节点 同胞节点等等。 ...
点击元素以外的地方隐藏元素插件
03-28
clickOutHide，点击元素以外的地方隐藏元素jQuery插件。能够支持忽略部分元素的配置，灵活方便。
radio点击事件修改样式
01-08
上一篇个性化了checkbox，这一篇搞一下radio。 效果图： 代码： test.html 女 男 tip:需要用到jquery,注意导入。 radio.js $(function() { ... var checked = $(this
uniapp 商品详情选购的样式
最新发布
05-01
代码文件
uniapp自定义tabbar图标样式
10-13
uniapp自定义tabbar图标样式uniapp自定义tabbar图标样式
uniapp运行到小程序之无法启动
热门推荐
weixin_44691220的博客
09-03 1万+
创建了一个uniapp项目，要求是在H5以及小程序都可运行，H5端很容易实现，那么我们来一起探讨小程序遇到的问题： 首先，HbuilderX运行到微信小程序，前提是要安装微信开发者工具，来模拟手机上的小程序情景 运行报错，原因是微信小程序工具的服务端口已关闭，所以需要在微信开发者工具中打开 本以为就万事大吉了，结果又出现如下问题导致小程序启动不了 通过百度又找到了解决方法，哈哈 然后关掉微信开发者工具再重新运行就ok啦，开发者工具会自动跳到当前项目小程序运行情景 ...
uniapp入坑（一）----事件冒泡
weixin_44691220的博客
12-11 5181
项目中用到了uni-segmented-control分段器来实现不同ucharts图表的切换，需求中有一个是点击除分段器按钮的其他地方时，界面要回到最初的那个。最先是尝试给最外面的盒子加上绑定点击事件，用到的是原生JS实现绑定，然后在分段器的onClickItem中用原生的阻止冒泡事件event.stopPropagation();在PC端运行的时候是完全没问题的，但用真机调试的时候发现报错了T...
生成一个随机的颜色
weixin_44691220的博客
01-24 2993
今天看uniapp官方文档时，无意中在例子中发现一个生成随机颜色的方法，在平时的开发工作中，例如弹幕或者一些其他文字的颜色有随机生成的需求时都可以用到，特先码住 getRandomColor: function () { const rgb = [] for (let i = 0; i < 3; ++i) { let color = Math.floor(Math.random() * 256).toString(16)
在uniapp怎么通过点击添加样式其他清空样式
09-12
### 回答1： 在uniapp中，你可以通过以下方法来实现点击添加样式和清空样式的功能： 1. 在data中定义一个变量，用于绑定需要添加样式的元素的class属性，例如： ``` data() { return { isActive: false } } ``` 2. 在需要添加样式的元素上绑定class属性，然后使用三元表达式来判断是否添加样式，例如： ``` <view class="item {{isActive ? 'active' : ''}}" @click="toggleActive"></view> ``` 3. 在toggleActive方法中，通过修改isActive变量的值来控制样式的添加和清空，例如： ``` methods: { toggleActive() { this.isActive = !this.isActive; } } ``` 这样，当你点击该元素时，它的class属性会动态地添加或清空active样式，从而实现点击添加样式和清空样式的功能。 ### 回答2： 在uniapp中，我们可以通过点击事件来添加样式和清空样式。 1. 首先，在模板中定义一个点击事件，例如： ``` <view class="container" @click="addStyle">点击添加样式</view> <view class="container" @click="clearStyle">点击清空样式</view> ``` 2. 在data中定义样式的变量，例如： ``` data() { return { isAdded: false } }, ``` 3. 在methods中分别定义添加样式和清空样式的函数： ``` methods: { addStyle() { this.isAdded = true; }, clearStyle() { this.isAdded = false; } } ``` 4. 在样式中使用条件判断来添加或清空样式，例如： ``` <style> .container { width: 200px; height: 200px; background-color: #ccc; } .added { color: red; } .clear { color: black; } </style> ``` 5. 在模板中通过条件判断来动态添加或清空样式，例如： ``` <view class="container" :class="{'added': isAdded, 'clear': !isAdded}">点击添加/清空样式</view> ``` 通过以上步骤，当我们点击 "点击添加样式" 按钮时，会给该元素添加样式 'added'，文字颜色将变为红色；当我们点击 "点击清空样式" 按钮时，会清空该元素的样式，文字颜色将恢复为黑色。 ### 回答3： 在UniApp中，可以通过点击事件来添加样式或清空样式。 首先，需要在模板中定义一个标志位，用于控制样式的添加和清空。这个标志位可以是一个布尔类型的变量，比如isClicked，初始值为false。 接下来，在点击事件的处理函数中，可以通过修改isClicked的值来切换样式的状态。比如，当isClicked为false时，表示未点击状态，点击后修改isClicked为true，表示已点击状态。 在模板中，可以使用条件渲染来根据isClicked的值来添加或清空样式。比如，可以通过v-bind:class来添加或移除一个特定的类名，用于控制样式。 示例代码如下： ``` <template> <view> <button @click="handleClick">点击按钮</button> <view :class="{'clicked-style': isClicked}"> 点击后添加样式 </view> </view> </template> <script> export default { data() { return { isClicked: false } }, methods: { handleClick() { this.isClicked = true // 修改标志位为true，表示点击了按钮 } } } </script> <style> .clicked-style { background-color: red; // 添加样式 } </style> ``` 以上代码中，定义了一个按钮，在点击按钮后会触发handleClick方法，将isClicked的值修改为true。同时，也定义了一个view组件，在isClicked为true时，会添加clicked-style样式，显示为红色背景；而在isClicked为false时，不添加任何样式，显示为默认样式。 通过这种方式，可以在UniApp中通过点击事件来添加样式或清空样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 12
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值