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

最新推荐文章于 2024-09-30 14:02:03 发布
最新推荐文章于 2024-09-30 14:02:03 发布
阅读量1.3k 收藏 1
点赞数 1
文章标签： javascript css uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Face_book_/article/details/130600080
版权
文章介绍了在uniapp开发App时，如何替代getElementById方法来实现视图高度动态增加10px。关键在于将vHeight放入style标签中，通过JavaScript操作CSS来达到目的，提供了一个学习示例。
摘要由CSDN通过智能技术生成

例如产品给了我们个需求需要点击一次按钮来使得view的高度增加10px
在html开发中很好实现，但是在uniapp开发app的时候发现并不能通过document.getElementById("")来指定。那么该怎么实现呢？往下看。

1.先搭建页面
嗯~我知道很丑，但就酱紫。Ծ‸Ծ
在这里插入图片描述

 

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

注意看改造后的style

在这里插入图片描述

仅供学习使用

 详情推荐(9条消息) Uniapp动态修改CSS（通过js修改CSS）_uniapp getelementbyid_不用89k的博客-CSDN博客

软件2班宋宇奎
关注
uni-app修改内置组件默认样式
dfgh0987的博客
03-10 4517
uni-app修改内置组件默认样式
uniapp 通过变量动态改变CSS样式，样式的动态改变
qq_37455326的博客
01-28 2130
【代码】uniapp 通过变量动态改变CSS样式，样式的动态改变。
uniapp将scss变量与元素属性进行绑定和js控制css属性
最新发布
AZP的博客
09-30 515
【代码】uniapp将scss变量与元素属性进行绑定和js控制css属性。
【uni-app】JS动态修改scss样式变量
ChenLingZhi1115的博客
06-06 1691
而是由于z-paging定位导致会覆盖或高度不适配当前navbar，所以设置88px。2、 当H5嵌入到H5时，类似于使用手机浏览器打开的页面，就不需要固定距离手机自带的头部高度。因此需要根据环境动态修改scss定义的变量。所以需要根据嵌入的环境进行判断并动态控制样式。
uniapp进行css动态变化
Think_and_work的博客
03-27 1849
uniapp进行css动态变化
uniapp插件：基于CSS实现的进度环.zip
01-23
在uniapp项目中，开发者可以将这个CSS进度环组件引入到页面中，通过修改CSS变量或者使用JS动态改变元素的样式来更新进度值。uniapp提供了丰富的API接口，可以方便地与JavaScript进行交互，实现数据驱动的UI更新。 ...
动态加载外部CSS与JS文件
12-10
动态加载外部CSS与JS文件是一种优化网页性能的技术，它允许我们在网页加载时按需加载资源，从而提升用户体验。这种技术通常用于大型应用或响应式设计，以减少初始页面加载时间，尤其是在用户网络环境不佳时。 首先...
基于uniapp的Vue.js+JavaScript+CSS党史学习APP设计源码
09-26
该项目为基于uniapp框架的Vue.js、JavaScript及CSS构建的党史学习APP源码，总计包含677个文件，其中包括264个PNG图片文件、207个Vue组件文件、122个JPG图片文件、52个JavaScript文件、12个SCSS样式文件以及少量JSON...
前端面试题html+css+js+ts+vue+react+uniapp
04-12
在前端开发领域，掌握HTML、CSS、JavaScript是基础，而TypeScript、Vue.js、React以及UniApp等技术则代表着现代Web应用的高级阶段。这些技术的深入理解和运用，对于前端开发者来说至关重要，尤其是在面试环节。以下...
在 uni-app 中，可以通过几种不同的方式来动态地绑定 CSS 样式?
baifangfang521的博客
05-27 1568
在 uni-app 中，你可以通过几种不同的方式来动态地绑定 CSS 样式。这通常涉及到使用 JavaScript 来计算或改变样式，并将这些样式应用到组件上。
Uinapp中js修改css变量,【前端技术】uniapp操作dom，改变css样式
weixin_42377407的博客
08-04 5544
在uniapp中，想给元素添加一些动态的css样式，例如transform,uni.createSelectorQuery().select(".sticke").boundingClientRect((res)=>{uni.createSelectorQuery().select(".sticke").style.transform}).exec()上述代码根本无法实现给元素添加trans...
Uni-APP __css&JS
wanxiweilai的博客
11-12 1097
uni-app tarbar的使用记录
uni-app：js修改元素样式（宽度、外边距）
weixin_46001736的博客
09-28 2371
uni-app：js修改元素样式（宽度、外边距）
uni-app动态设置CSS样式
UserGuan的博客
12-31 5421
style 里面需使用 kekbeb-case 命名方式：即 --dist-menu 而不是 --distMenu 方式，否则在微信小程序模式运行无效。 方法一 <view class="fontTip" :style="{ '--dist-menu': distMenu }"></view> data() { return { distMenu: 20 }; }, <style lang="scss" scoped> $dist
uniapp定义scss颜色变量deep()修改子组件样式
2301_76917834的博客
08-25 552
在base-style.scss中。在index.vue中使用。
uniapp-动态主题-使用动态scss变量切换主题
热门推荐
weixin_48429986的博客
11-13 1万+
先看效果 以上是两种主题方案 进入实现方法和讲解 原理： <view class="dark-bg" :style="{'--text-color': color}"> // 注意这里的 text-color <view class="h2">测试组件</view> <view> <select-theme></select-theme> </view> <view
UniApp 获取分辨率动态设置CSS样式
Lix0777的博客
03-17 1446
首先我们定义一个容器 <view class="det-pl"> 123123 </view> .det-pl{ width:200px; background-color: #000000; } 定义了之后，我们需要绑定样式哟，在uniapp官网文档中也是有讲解的，而且也是有不同的方法，那么现在用的是一个最简单的方法 <view v-bind:style="[{ height: activeColor, fontSize: fontSiz
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值