获取高度:

<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

vue获取dom元素高度的方法的更多相关文章

  1. javascript中获取dom元素高度和宽度

    javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...

  2. vue获取dom元素内容

    通过ref来获取dom元素 在vue官网上对ref的解释 ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 D ...

  3. vue获取dom元素注意问题

    mounted(){ setTimeout(()=>{ this.contentToggle(); },1000) }, methods:{ contentToggle(){ console.l ...

  4. vue获取DOM元素并设置属性

    这里我想到了2个方法: 方法一: 直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式 方法二: 使用ref,给相 ...

  5. Vue 获取DOM元素ref

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Vue获取DOM元素的属性值

    项目中需要做一个小弹层,如下图: 我需要知道点击元素距离顶部的值,再计算弹层的top值,如下图: 在vue中如何获取到DOM元素距离窗口顶部的值呢? 1.通过$event获取 html: <di ...

  7. Vue获取dom元素

     <li  @click='获取li标签'    :ref="center-li" id="center-li"      > =====我是li标 ...

  8. Vue 获取dom元素之 ref 和 $refs 详解

    一.$refs 一个对象,持有ref注册过的所有元素或子组件.(注册过的 ref 的集合) 二.ref 被用来给元素或子组件注册引用信息.若用在dom元素上,引用指向的就是dom元素:若用在子组件上, ...

  9. Vue获取DOM元素样式 && 样式更改

    在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 'style' is not definde的错误, 这时候可以在 mounted 里用 $refs 来获取样 ...

随机推荐

  1. MFC项目实战(1)文件管理器--界面设计篇

    1.创建项目 文件管理器是一个基于对话框的应用程序.首先新建一个“MFC应用程序”类型的项目,然后输入新建项目的名称“FileMng”,并指定该项目保存的位置,单击“确定”按钮,如图所示. 在弹出的“ ...

  2. CASE UPDATE

    https://leetcode-cn.com/problems/swap-salary/description/ Given a table salary, such as the one belo ...

  3. Jboss

    是一个基于J2EE的开放源代码的应用服务器. JBoss代码遵循LGPL许可,可以在任何商业应用中免费使用,而不用支付费用.JBoss是一个管理EJB的容器和服务器,支持EJB 1.1.EJB 2.0 ...

  4. struts2的一些小问题

    1.action和ValueStack的关系2.ValueStack的类set()方法和setValue()方法的区别3.ValueStack的类push()方法的作用4.从ValueStack对象中 ...

  5. linux文件读写 文件锁、select、poll【转】

    本文转载自:http://blog.csdn.net/fansongy/article/details/6853395 一.文件锁 文件锁用于多个用户共同使用或操作同一个文件.有读锁的时候可以再加读锁 ...

  6. Ubuntu18开启redis服务自启动

    设置redis服务开机自启动. 1.创建配置文件夹 sudo mkdir /etc/redis sudo cp /usr/local/redis/redis.conf /etc/redis sudo ...

  7. ”吐槽“qemu的块设备驱动

    花点时间来总结一下前阵子的工作. qemu的底层块设备无疑是我所见过的最复杂的模块了,说得好像我很精通很多模块一样(大雾). 它的raw镜像格式文件的驱动的核心代码主要都是在raw-posix.c文件 ...

  8. 使用maven新建类目录是,报错The folder is already a source folder.的解决办法

    转自:https://www.cnblogs.com/loger1995/p/6539139.html 我们有时候新建一个webapp的maven项目时,生成的目录结构是这样子的: 缺少maven规范 ...

  9. EF include 预先加载

    在asp.net mvc 中,常在控制器中预先加载导航属性,以便在视图中能够显示起关联的数据. 如果不预先加载,View中就会无法呈现外键的 关联数据. 会提示EF 错误发生. 一. 模型: publ ...

  10. 字符串常量是String类的匿名对象

    String str = "Hello"; System.out.println(str.equals("Hello"));//true,字符串对象调用equa ...