Uniapp动态修改CSS（通过js修改CSS）

最新推荐文章于 2024-05-16 10:54:03 发布
最新推荐文章于 2024-05-16 10:54:03 发布
阅读量4.8k 收藏 4
点赞数 2
分类专栏： 前端 html 文章标签： npm sass 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_54850952/article/details/123265911
版权
本文介绍如何在uniapp中动态修改CSS，针对产品需求，演示了一个通过点击按钮改变view高度10px的例子。文章详细阐述了改造过程，强调了在uniapp中不能使用document.getElementById()的方法，并提供了完整的Demo代码，包括使用三元表达式的动态style写法。
摘要由CSDN通过智能技术生成
例如产品给了我们个需求需要点击一次按钮来使得view的高度增加10px

在html开发中很好实现，但是在uniapp开发app的时候发现并不能通过document.getElementById("")来指定。那么该怎么实现呢？往下看。

1.先搭建页面

嗯~我知道很丑，但就酱紫。
在这里插入图片描述

2.重点！！！改造代码，将vHeight放入的style标签中。

注意看改造后的style
在这里插入图片描述
嗯~改造完成，试一下效果。

最低0.47元/天 解锁文章
Forpear
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uni-app：js修改元素样式（宽度、外边距）
weixin_46001736的博客
09-28 2018
uni-app：js修改元素样式（宽度、外边距）
uniapp真机 document.getElementById报错
qq_26762529的博客
08-11 7923
uniapp真机 document.getElementById报错
uniapp css变量绑定js变量
最新发布
weizhijava的博客
05-16 410
style = "[]" 数组形式的绑定n个对象，也可直接绑定一个对象，将对应的变量参数作为成员变量。声明css在本页面的全局变量绑定js对象。js控制css样式，有多种方法。2. style对象绑定（略）1. 类名绑定（略）
前端获取节点方法总结
weixin_43900440的博客
12-18 1359
前端节点获取
uniapp发布为小程序加载mapbox
qq_43171049的博客
06-10 4096
小程序的踩坑之旅 1 uniapp 本身是加载不了mapbox的 下面两个是在vue环境下导入mapbox vuecli+mapboxgl创建demo Vue中使用地图平台MapboxGL uniapp中加载mapbox会出现这个错误 “TypeError: Cannot read property ‘getElementById’ of undefined” 原因：微信小程序不支持操作dom元素， dom is not defined mapbox 他的Map方法里面就用的document.getEl
uni-app获取dom节点信息
...
10-03 9981
uni-app获取dom节点信息
uniapp插件：基于CSS实现的进度环.zip
01-23
在uniapp项目中，开发者可以将这个CSS进度环组件引入到页面中，通过修改CSS变量或者使用JS动态改变元素的样式来更新进度值。uniapp提供了丰富的API接口，可以方便地与JavaScript进行交互，实现数据驱动的UI更新。 ...
动态加载外部CSS与JS文件
12-10
动态加载外部CSS与JS文件是一种优化网页性能的技术，它允许我们在网页加载时按需加载资源，从而提升用户体验。这种技术通常用于大型应用或响应式设计，以减少初始页面加载时间，尤其是在用户网络环境不佳时。 首先...
uniapp-tailwind-uview-starter:利用uniapp + tailwindcss + uview构建的一套基础模板，可以使用Webstorm或者vscode开发
04-03
uniapp-tailwind-uview-starter利用uniapp + tailwindcss + uview构建的一套基础模板背景：之前用uniapp + uview开发了一大一小两个小程序， css方案用的原子风格的，发现用的还是挺爽的，就在想能不能用上tailwind...
document.getElementById的一些细节
12-09
① document.getElementById 有时会抓name放过了id ，据说是IE的一个BUG； http://community.csdn.net/Expert/topic/4223/4223888.xml?temp=.1947443 页面中有  程序代码 <input type=”hidden” id=”hello8″ name=”category_id” value=”2″ /> <select id=”category_id” onchange=”al();”> 一个是name=”category_id” 一个是id=”category_id”  用document.getE
前端面试题html+css+js+ts+vue+react+uniapp
04-12
在前端开发领域，掌握HTML、CSS、JavaScript是基础，而TypeScript、Vue.js、React以及UniApp等技术则代表着现代Web应用的高级阶段。这些技术的深入理解和运用，对于前端开发者来说至关重要，尤其是在面试环节。以下...
基于uniapp框架的手办玩具商城 包论文 HTML5+css+JavaScript+ MYSQL+Uniapp+Expree
01-05
HTML5+css+JavaScript+ MYSQL+Uniapp+Expree 开发手办玩具商城所采用的开发语言、开发工具及技术框架。考虑到商城平台的普遍用户需求，平台选择使用Uniapp、Express框架以及HTML5、CSS3和JavaScript语言进行开发。...
点击标题显示相应内容
shenqh
07-18 9137
点击标题显示相应内容的功能就是将页面分成上下两部分，其中上面部分全都是标题，可能会有多个标题。下面部分就是标题的内容部分，根据标题部分的选中情况展示对应标题的内容。因为本功能是静态页面，所以实现原理依然是控制页面的显示和隐藏。在实际应用中也会有这样的场景，但是如果应用场景是实时读取后台内容建议不要使用这种方式。 同样的节奏，先上预览图，再上代码，然后对代码进行讲解。因为后面会对内容进行讲解，所以...
document.getElementById使用
vancekq的专栏
09-30 864
document.getElementById(" ") 得到的是一个对象，用 alert 显示得到的是 “ object ”，而不是具体的值，它有 value 和 length 等属性，加上 .value 得到的才 是具体的值！   参考资料： 1. document . getElementById 的用法和 DHTML.CHM 的下载地址 http://blog.si
document.getElementById为空或不是对象的解决方法
北极光的博客
09-10 5425
作了个页面，询问用户是否升级，如果“是”，那么就把含有会员信息的隐藏域的表单提交，很简单的东西，本地测试也正常，传到服务器却出现问题了，点击“是”后，死活不提交表单，奇了怪了，上网查吧，终于被我查到了，现在把正篇文章转过来： 1. 'null'为空或不是对象: 里面加个defer=true属性试试看， 即: 2. document.getElementById为nul
uni-app电子签名功能
weixin_39357177的博客
03-23 1443
随着时代的发展，以前的手写签名，逐渐衍生出了电子签名，比如钉钉等系统中等电子签名，电子签名和纸质手写签名一样具有法律效应。作为前端等我们如何实现电子签名呢？其实在html5中已经出现了一个重要等辅助标签——canvas我们想要定义笔的颜色、宽度，可以怎么做呢，我们可以抽离成一个方法，后续需要什么颜色，什么宽度都可以直接改好lastX = x;lastY = y;lineWidth设置笔的宽度设置绘制线的颜色但是我们看到了新增了lastX和lastY。
uniapp使用echarts图表问题及解决
weixin_55532289的博客
02-07 7637
根据项目功能需要在app上显示一些统计类的图表，因此我使用了echarts插件，后来在使用的过程中遇到了一些问题，特此记录下来： 问题一：在同一页面使用多个echarts图表 开发环境： 基于uniapp框架 vue语法时使用echarts插件 实现：在单页面中需要嵌套一组script标签，通过rander.js文件渲染。如下： // view部分 <view class="customer"><view ref="chart" @click="echarts.onClick" :prop
uniapp APP.vue文件动态修改css变量
03-29
可以通过以下步骤在uniapp的APP.vue文件中动态修改CSS变量： 1. 在APP.vue文件中的标签中定义需要修改的CSS变量，例如： ```css :root{ --primary-color: #007bff; } ``` 2. 在APP.vue文件的标签中，定义一...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值