获取高度:

<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. my.cnf配置详解[转载]

    先粘贴一份mac下的mysql5.6.22的配置文件 # Example MySQL config file for medium systems. # # This is for a system ...

  2. 在spring中映射X.hbm.xml文件的小技巧

    通常在spring中会这么写代码: <bean id="sessionFactory" class="org.springframework.orm.hiberna ...

  3. WIN7 不用格式化磁盘怎么把FAT32系统改成NTFS系统

    开始-运行,输入cmd回车.假设你要转换D盘.输入convert d: /fs:NTFS回车. [ 此时可能会提示: 访问被拒绝 因为你没有足够的特权 是权限不够的原因 开始--程序--附件 右键&q ...

  4. egrep grep -E

    egrep执行效果与"grep-E" Linux egrep命令用于在文件内查找指定的字符串. egrep执行效果与"grep-E"相似,使用的语法及参数可参照 ...

  5. YTU 2911: 我想放假

    2911: 我想放假 时间限制: 1 Sec  内存限制: 128 MB 提交: 124  解决: 46 题目描述 小明的弟弟上小学了,每次刚入学就想知道什么时候放假,但是每学期开学的日子和每学期的有 ...

  6. FWT [BZOJ 4589:Hard Nim]

    4589: Hard Nim Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 275  Solved: 152[Submit][Status][Disc ...

  7. Python3字符串方法

    Python字符串方法图示: 1.index() 重点 定义:查找并返回指定str的索引位置,如果没找到则会抛异常(查找的顺序是从左至右)可以指定范围:开始位置和结束位置进行查找. 格式:“字符串内容 ...

  8. sizeof注意

    1.sizeof用于获取非托管类型的大小(以字节为单位). 非托管类型包括下表列出的内置类型以及以下类型: 枚举类型 指针类型 用户定义的结构,不包含任何属于引用类型的字段或属性     struct ...

  9. 基于《Hadoop权威指南 第三版》在Windows搭建Hadoop环境及运行第一个例子

    在Windows环境上搭建Hadoop环境需要安装jdk1.7或以上版本.有了jdk之后,就可以进行Hadoop的搭建. 首先下载所需要的包: 1. Hadoop包: hadoop-2.5.2.tar ...

  10. centos配置nodejs和mysql

    我使用的是centos7.2 64位,弄了一大晚上试了各种方法,安装的nodejs就是启动不了服务器.全是IP能ping通,浏览器不能访问.端口都是打开了的.安全组也设置了,就是不行.最后阿里云客服电 ...