uniapp 获取元素，通过style修改元素的样式

最新推荐文章于 2023-09-28 10:24:10 发布

坐等夕阳落time

最新推荐文章于 2023-09-28 10:24:10 发布

阅读量2.4k

点赞数

分类专栏：前端文章标签： uni-app 前端

本文链接：https://blog.csdn.net/weixin_43991241/article/details/128833493

版权

前端专栏收录该内容

40 篇文章 2 订阅

订阅专栏

<input type="text" ref="inn" value="ss">

// 获取元素改变样式
this.$refs.inn.$el.style.marginLeft = "100px"
// 获取值
this.$refs.inn.value

注意：

1、Hbulider的运行控制台窗口打印不了this.$refs.inn，得浏览器的控制台才能查看。

2、uniapp和vue的修改元素样式的区别就是多了.$el（但是vue也能这样写的）

3、只能在H5端使用

模板引用 | Vue.js

组件实例 | Vue.js

uniapp动态修改元素节点样式详解_javascript技巧_脚本之家

Vue 之获取并修改元素样式（比如案例取色器的实现）_zhuangwei_8256的博客-CSDN博客_vue获取元素样式

关注博主即可阅读全文

优惠劵

坐等夕阳落time

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
uniapp 获取元素，通过style修改元素的样式

uniapp 获取元素，通过style修改元素的样式
复制链接

扫一扫

专栏目录

vue3 标签的ref属性获取值，修改样式

jieweiwujie的博客

03-14

383

【代码】vue3 标签的ref属性获取值，修改样式。

uniapp写微信小程序，获取openId、unionId总结

06-18

用于解密unionId的js包，使用前需 npm install crypto

参与评论您还未登录，请先登录后发表或查看评论

uni-app（app端）元素样式问题

exlinker的博客

03-28

2399

前言 uni-app不支持使用js控制元素样式，仅支持获取样式。解决方法动态绑定class 向目标元素动态绑定class，然后给该class添加css样式。如html部分: <userInfo :class="{'show': scrollSwitch}"></userInfo> 动态绑定style 向该元素直接绑定样式，此方法好处是可以使用变量。如html部分： <view :style="{ 'width': lW + 'px',

uni-app 微信小程序获取节点css布局

l963937050的博客

01-03

655

uni-app 获取节点css布局

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 获取图片的MD5

06-12

资源文件

uni-app：js修改元素样式（宽度、外边距）

weixin_46001736的博客

09-28

1663

uni-app：js修改元素样式（宽度、外边距）

Vue/uni-app动态修改元素的样式

qq_45155741的博客

09-30

2894

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

vue动态渲染ref,获取this.$refs.xxx.style为undefined

weixin_42947972的博客

06-14

1467

vue动态渲染ref

uniapp怎么获取元素高度，获取元素节点信息，获取界面剩余高度

A1123352950的博客

09-08

6789

uniapp获取元素高度，获取元素信息，以及获取页面剩余高度问题的解决方案

Vue获取dom元素节点并操作元素的样式（$el的用法以及uni-app中操作元素样式）

qq_39224105的博客

12-29

8995

在vue中操作dom元素节点的样式有好几种方式这里我总结了两种第一种： 1.获取到元素节点(这里通过this.$refs获取元素节点) this.$refs.xxxxx.$el 2.操作元素的样式 this.$refs.num1Underline.$el.style.transform = 'scaleX(1)'; 这种方法需要注意的是$el 用于获取vue挂载的实例的dom对象，如果不添加$el则获取不到style的属性值，会打印 TypeError: Cannot read property .

uni-app 组件里面获取元素宽高的实现

10-15

主要介绍了uni-app 组件里面获取元素宽高的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

Uniapp微信小程序滚动条跳转到元素高度

09-04

Uniapp框架的针对微信小程序的使滚动条跳转到指定元素位置。直接复制粘贴内容，然后配置好page.json。就可以直接查看效果。

uniapp获取用户通讯录外加后台系统

热门推荐

如果不是现在，那是什么时候呢

04-06

4万+

//6.14更新但是有个办法，我们可以使用 this.$nextTick(() => { // todo }) setTimeout(() => { // todo }, 0) 来得到数据 ref 本身作为渲染结果被创建，在初始渲染的时候不能访问他们，是不存在的 $refs不是响应式的，只在组件渲染完成后才填充用于元素或子组件注册...

uniapp 自定义组件Style无法使用

一名假人的博客

08-30

3299

uniapp 自定义组件Style无法使用问题描述最近在写一个uniapp的前端项目，在使用这个前端框架中遇到了关于组件样式不响应的问题。模拟 <template>  <view id="nodes"> </view> </template> <script> export default { data() { },

uniapp中获取dom元素的方法，更改dom元素颜色（遇坑记录）

weixin_45745641的博客

02-08

1万+

最近写uniapp，遇到一个需要获取到页面中dom元素，我第一反应是使用this.$ refs进行获取，于是我开心的使用this.$refs写了很多代码，使用h5调试的过程中没有发现任何问题，但后来真机调试的时候发现在app端无效，于是我查看文档发现了：非H5端只能用于获取自定义组件，不能用于获取内置组件实例（如：view、text）

uniapp 获取dom元素进行操作

03-30

在uniapp中获取dom元素可以使用小程序的选择器api，具体步骤如下： 1. 在template中定义需要操作的dom元素，可以使用id或class属性标识。 ``` <template> <view class="container"> <text id="text">Hello World!</text> </view> </template> ``` 2. 在js文件中使用选择器api获取dom元素，可以使用uni.createSelectorQuery()方法获取选择器对象，然后使用select方法选中需要操作的元素。 ``` export default { mounted() { uni.createSelectorQuery().select('#text').boundingClientRect(data => { console.log('dom元素信息：', data) }).exec() } } ``` 3. 获取到dom元素之后可以进行相关操作，比如修改元素的样式、内容等。 ``` export default { mounted() { uni.createSelectorQuery().select('#text').boundingClientRect(data => { console.log('dom元素信息：', data) data.node.textContent = 'Hello uniapp!' data.node.style.color = 'red' }).exec() } } ``` 注意：在uniapp中使用选择器api获取dom元素时，需要使用boundingClientRect方法获取元素信息，因为getBoundingClientRect方法在uniapp中不支持。

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

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交