vue获取dom元素高度的方法

男娘i 2021-09-30 11:02 2031阅读 0赞

获取高度：

<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 条评论，2031人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue如何获取一个元素的高度

Vue 中获取一个元素的高度可以使用 JavaScript 原生方法或者 Vue 内置的 $refs。 1. 使用 JavaScript 原生方法：可以在 mounte

喜欢ヅ旅行/ 2023年09月25日 16:03/ 0 赞/ 153 阅读

相关 vue中获取dom元素

最近在项目中要用到拦截器，坦白说是第一次听说这玩意，所以资料查了好久，现在也算是明白了拦截器的作用。我的理解就是拦截每一次你的请求和响应，然后进行相应的处理。比如一些网站过了一

末蓝、/ 2023年06月13日 06:08/ 0 赞/ 24 阅读

相关 Vue项目中稳健的获取dom元素

1、获取Element的弹框中的Dom元素由于弹框由v-if控制，在初始页面渲染的时候，并不存在该Dom元素，所以在mounted中，获取不到该弹框的Dom元素

迈不过友情╰/ 2023年06月05日 12:52/ 0 赞/ 44 阅读

相关 Vue 获取dom元素宽高，给element表格设置动态高度

[https://blog.csdn.net/aithena/article/details/103251010?utm\_medium=distribute.pc\_rele

谁借莪１个温暖的怀抱￠/ 2023年02月15日 07:54/ 0 赞/ 33 阅读

相关 Vue.js中$refs{}获取DOM元素

如果我们想获取DOM元素，一般使用js中的`document.querySelector`来获取这个dom节点，然后在获取元素的值，现在Vue提供给我们一种更便捷的方式来获取D

以你之姓@/ 2022年12月22日 10:00/ 0 赞/ 361 阅读

相关【VUE系列】获取元素宽度高度等

获取元素宽度给元素绑定个 ref 如 <div ref="divWidth">测试</div> 使用函数获取 //可以输出如下对象，查找到宽度cl

矫情吗；*/ 2022年10月15日 14:54/ 0 赞/ 344 阅读

相关 vue中获取并操作dom元素

获取dom元素可以使用 elementList = document.querySelectorAll(selectors);//获取多个dom元素如ul中的li

墨蓝/ 2022年05月21日 03:45/ 0 赞/ 301 阅读

相关 HTML中获取Dom元素的方法

HTML中获取Dom元素的方法 1.getElementsByTagName()方法：获取标签，获取的值是一个数组形式；然后再通过数组下标来准确得到自己想要的值

亦凉/ 2022年01月27日 01:27/ 0 赞/ 736 阅读

相关 vue获取dom元素高度的方法

获取高度： <div ref="自定义名称" > </div> 要在钩子mounted里面dom结构生成后去获取dom的高度，宽度，修改样式

男娘i/ 2021年09月30日 11:02/ 0 赞/ 2032 阅读

相关 Vue.js动态获取浏览器高度、宽度并进行实时修改DOM元素高度

> 需求：项目中有高度、宽度自适应需求，需要适应不同分辨率的高度及宽度，在不同分辨率下效果区别不会很大 html代码如下： <template>

た入场券/ 2021年07月26日 13:46/ 0 赞/ 1151 阅读