vue获取dom元素高度的方法

本文详细介绍了在Vue.js的mounted生命周期钩子中如何获取DOM元素的高度、宽度并进行样式修改。通过使用`this.$refs`结合CSSOM API获取元素样式值,实现精确的布局调整。同时,文章提供了不同方式获取元素高度,包括内联样式和计算样式。
摘要由CSDN通过智能技术生成
<div ref="自定义名称" >

</div>

要在钩子mounted里面dom结构生成后去获取dom的高度,宽度,修改样式等操作!!!

mounted() {
    let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; //浏览器高度
    let topH = this.$refs.topInfo.offsetHeight;
    console.log()
    let tabH = this.$refs.tab.offsetHeight;
    console.log()
    let subH = this.$refs.subBtn.offsetHeight;
    console.log()
    let scrollHight = this.$refs.scroller.offsetHeight
    this.height = (h - topH - tabH - subH) + "px"
    //localStorage.setItem("access_token", '52ecda6ecb4a11e7bd2a00163e0891fd') //测试token
    this.queryData(0)
    let w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;//浏览器宽度  

  }   //获取dom元素高度通过在标签里面定义ref属性,用this.$refs.自定义名称.offsetHight;去获取。

还有其他获取指定高度的方式:

//获取元素样式值,为元素ref="ele"(在样式里面写死了的高度)
var heightCss = window.getComputedStyle(this.$refs.ele).height; // ?px


//获取元素内联样式值
var heightStyle =this.$refs.ele.style.height; // ?px

内容转自 https://www.cnblogs.com/lhl66/p/7908133.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在 Vue 中监听 DOM 元素高度的变化,您可以使用 Vue 的 `$nextTick` 方法和 `Intersection Observer API`。 首先,在模板中,您需要使用一个具有固定高度的外层元素包裹您要监听高度变化的元素,例如: ```html <template> <div class="container"> <div class="content" ref="myContent"></div> </div> </template> <style> .container { height: 200px; overflow: auto; } .content { height: 400px; } </style> ``` 上面的代码中,我们在外层使用了一个具有固定高度和滚动条的容器,并在内部添加了一个高度为 400px 的 `<div>` 元素。 接下来,在 Vue 实例中,您需要通过 `$refs` 来获取要监听高度变化的元素,并使用 `Intersection Observer API` 来监听该元素的变化,例如: ```js export default { mounted() { const observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { this.$nextTick(() => { console.log(this.$refs.myContent.clientHeight) }); } }); }); observer.observe(this.$refs.myContent); } } ``` 上面的代码中,我们在 Vue 实例的 `mounted` 生命周期钩子中创建了一个 `IntersectionObserver`,并通过 `$refs` 获取了要监听高度变化的元素。然后,我们使用 `IntersectionObserver` 监听该元素的变化,并在元素进入视口时,使用 `$nextTick` 方法获取元素的新高度,并打印到控制台中。 需要注意的是,`$nextTick` 方法会在 DOM 更新后执行回调函数,以确保获取到的元素高度是最新的。这是因为 Vue 的更新是异步的,在修改 DOM 后,您无法立即获取到最新的 DOM 元素高度
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值