vue获取dom元素高度的方法

最新推荐文章于 2024-07-26 15:59:09 发布

为了维护世界的爱与和平

最新推荐文章于 2024-07-26 15:59:09 发布

阅读量5.2k

点赞数

文章标签： vue elementui

原文链接：https://www.cnblogs.com/lhl66/p/7908133.html

版权

本文详细介绍了在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