vue 获取元素宽高

vue 中获取组件宽高分两种情况：
1、获取普通组件宽高，直接使用 $refs 即可
2、获取子组件宽高，需使用 $refs.$el

子组件

<template><div class="div_box">这是一个子组件</div>
</template><script>
export default {name: 'ChileHeight'
}
</script><style lang="scss" scoped>
.div_box {padding: 20px;border: 20px solid red;
}
</style>

父组件

<template><div class="home"><div class="div_card" ref="attrRef">获取元素高度</div><child-height ref="childRef"></child-height></div>
</template><script>
import ChildHeight from './note/child-height.vue'
export default {name: 'Home',components: {ChildHeight},mounted() {// 获取元素宽高const w = this.$refs.attrRef.offsetWidthconst h = this.$refs.attrRef.offsetHeightconsole.log('获取元素宽高', w, h)// 获取子组件元素宽高const w_child = this.$refs.childRef.$el.offsetWidthconst h_child = this.$refs.childRef.$el.offsetHeightconsole.log('获取子组件元素宽高', w_child, h_child)}
}
</script>
<style scoped>
.div_card {padding: 20px;border: 10px solid yellow;
}
</style>

`clientHeight` 和 `offsetHeight` 区别

clientHeight：包括padding但不包括border、水平滚动条、margin的元素的高度
offsetHeight：包括padding、border、水平滚动条，但不包括margin的元素的高度

vue 获取元素宽高相关推荐

jquery获取元素宽高
前言 jquery获取元素宽高 <!DOCTYPE html> <html lang="zh" > <head><meta charset ...
微信小程序view动态长度_微信小程序实现动态获取元素宽高的方法分析
本文实例讲述了微信小程序实现动态获取元素宽高的方法.分享给大家供大家参考,具体如下: 我以前一直以为微信小程序不能动态获取view元素的宽高.但是自从看到: wx.createSelectorQuer ...
如何通过JS获取元素宽高
方法一:DOM节点.offsetWidth/offsetHeight 作用:获取到的是内容区域(content) + 内边距(padding) + 边框(border)的值,输出一个数字. <s ...
原生js获取html元素高度,原生JS获取元素宽高实践详解
开篇的话任何不是亲身实践中求得的知识,都不是属于你的. 任何求得的知识不去时常温习运用,也不是属于你的. 记录由来在做个上拉广告功能中遇到了一个"理所当然"觉得对的用法,慢慢才 ...
Vue ref 和 $refs 获取元素宽高
Vue3当中获取方法一:借助 ref() 函数 (推荐) <div ref="box">我是div </div>import { ref,onMounte ...
微信小程序获取页面元素高度_微信小程序之动态获取元素宽高
我以前一直以为微信小程序不能动态获取view元素的宽高.但是自从看到: wx.createSelectorQuery() 这个api接口,以前的某些问题就能得到解决了... 那么,这个api接口怎么用 ...
小程序组件获取元素宽高失效和canvas绘制问题
解决办法: 在自定义组件内获取必须用SelectorQuery.in() Component({lifetimes: {ready() {const query = wx.createSelector ...
dom操作获取盒子宽高位置的三种方法,offset/scroll/client三大家族使用详解(附源码及注释)
结论:页面body的高度==视口的高度+滚动条滚动的距离. 这是一个恒等式,看完本篇博客,你将了解offset/scroll/clent三大事件获取宽高位置的具体含义,运用所学内容可以推导出这样的恒等 ...
jquery获取设置元素宽高位置height()、width()、offset()、position()、scrollTop()、scrollLeft()
全栈工程师开发手册 (作者:栾鹏) jquery系列教程2-style样式操作全解 jquery获取设置元素宽高位置 jquery的通过height().width().offset().positi ...

vue 获取元素宽高

vue 获取元素宽高

`clientHeight` 和 `offsetHeight` 区别

vue 获取元素宽高相关推荐

最新文章

热门文章

vue 获取元素宽高

vue 获取元素宽高

clientHeight 和 offsetHeight 区别

vue 获取元素宽高相关推荐

最新文章

热门文章

`clientHeight` 和 `offsetHeight` 区别