uniapp动态修改css样式(通过js来修改css样式)

简介: uniapp动态修改css样式(通过js来修改css样式)

 在uniapp开发app时,想通过js的document.getElementById("")来实现动态修改css的样式,结果却是不能实现的,uniapp不支持该用法。那如何在uniapp中实现通过js动态地修改css样式呢?
  假设点击一次按钮来使让某一个view的高度增加10px,该如何实现呢?

1.搭建页面

<template>
    <view class="page-content">
        <view style="background-color: red">我是view</view>
        <button type="default" @click="addHeight()">点击</button>
    </view>
</template>

<script>
    export default {
   
        data() {
   
            return {
   
                needHeight: 20,
            }
        },
        methods: {
   
            addHeight() {
   
                this.needHeight+= 10;
            }
        }
    }
</script>

<style>
</style>

image.png
2.修改代码,实现js动态修改css样式的效果

<template>
    <view class="page-content">
        <view :style="{'height':needHeight + 'px', 'background':'red'}">我是view</view>
        <button type="default" @click="addHeight()">点击</button>
    </view>
</template>

<script>
    export default {
   
        data() {
   
            return {
   
                needHeight: 20,
            }
        },
        methods: {
   
            addHeight() {
   
                this.needHeight += 10;
            }
        }
    }
</script>

<style>
</style>

image.png
注意:js中动态修改css样式,需要先定义好要修改的变量,注意style的书写格式
  1. style前面需要加 : 号
  2. style 引号中需要添加 {} 号
  3. 不同样式用 , 号分割
  4. 不同属性用 ' ' 单引号(取决于最外层符号)
  5. 变量是否需要单位,如果需要记得添加上单位。

动态style格式:

:style="{'height':needHeight + 'px', 'background':'red'}"

style中也可使用三元表达式:

:style="{'height':needHeight == 20?'100px':''}"
相关文章
|
25天前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染,了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略,可以提高网页的性能和用户体验,确保页面能够快速、流畅地呈现给用户。在实际开发中,要根据具体情况进行权衡和调整,以达到最佳的效果。
|
13天前
|
前端开发 JavaScript
如何在 JavaScript 中访问和修改 CSS 变量?
【10月更文挑战第28天】通过以上方法,可以在JavaScript中灵活地访问和修改CSS变量,从而实现根据用户交互、页面状态等动态地改变页面样式,为网页添加更多的交互性和动态效果。在实际应用中,可以根据具体的需求和场景选择合适的方法来操作CSS变量。
|
3天前
|
缓存 前端开发 JavaScript
优化CSS和JavaScript加载
Next.js和Nuxt.js在优化CSS和JavaScript加载方面提供了多种策略和工具。Next.js通过代码拆分、图片优化和特定的CSS/JavaScript优化措施提升性能;Nuxt.js则通过代码分割、懒加载、预渲染静态页面、Webpack配置和服务端缓存来实现优化。两者均能有效提高应用性能。
|
3天前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
28 1
|
8天前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
19 3
|
13天前
|
前端开发 JavaScript UED
如何使用 JavaScript 动态修改 CSS 变量的值?
【10月更文挑战第28天】使用JavaScript动态修改CSS变量的值可以为页面带来更丰富的交互效果和动态样式变化,根据不同的应用场景和需求,可以选择合适的方法来实现CSS变量的动态修改,从而提高页面的灵活性和用户体验。
|
19天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
69 6
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
127 7
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
62 7
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
82 7

热门文章

最新文章