vue获取dom元素高度的方法
获取高度:
<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元素高度的方法的更多相关文章
- javascript中获取dom元素高度和宽度
javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...
- vue获取dom元素内容
通过ref来获取dom元素 在vue官网上对ref的解释 ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 D ...
- vue获取dom元素注意问题
mounted(){ setTimeout(()=>{ this.contentToggle(); },1000) }, methods:{ contentToggle(){ console.l ...
- vue获取DOM元素并设置属性
这里我想到了2个方法: 方法一: 直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式 方法二: 使用ref,给相 ...
- Vue 获取DOM元素ref
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue获取DOM元素的属性值
项目中需要做一个小弹层,如下图: 我需要知道点击元素距离顶部的值,再计算弹层的top值,如下图: 在vue中如何获取到DOM元素距离窗口顶部的值呢? 1.通过$event获取 html: <di ...
- Vue获取dom元素
<li @click='获取li标签' :ref="center-li" id="center-li" > =====我是li标 ...
- Vue 获取dom元素之 ref 和 $refs 详解
一.$refs 一个对象,持有ref注册过的所有元素或子组件.(注册过的 ref 的集合) 二.ref 被用来给元素或子组件注册引用信息.若用在dom元素上,引用指向的就是dom元素:若用在子组件上, ...
- Vue获取DOM元素样式 && 样式更改
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 'style' is not definde的错误, 这时候可以在 mounted 里用 $refs 来获取样 ...
随机推荐
- hibernate could not resolve property
映射文件字段不匹配 这个异常一般是因为映射文件造成的: 1.hibernate.config.xml中添加的映射文件是否正确 2.映射文件中的类是否正确指定. 3.映射文件映射的属性名是否跟类中的属性 ...
- javaScript查找HTML元素
1.通过id查找 例:查找id="intro"元素 var x=document.getElementById("intro"); 2.通过标签名查找 例:查找 ...
- bat文件中调用传参的问题
https://blogs.msdn.microsoft.com/twistylittlepassagesallalike/2011/04/23/everyone-quotes-command-lin ...
- 演练:使用属性自定义 DataGrid 控件
演练:使用属性自定义 DataGrid 控件 Silverlight 此主题尚未评级 - 评价此主题 Silverlight DataGrid 控件支持常用表格式设置选项,例如交替显示不同的行 ...
- 利用js和CSS实现网页局部打印
1 局部打印方法: 作用:将id为dayin的内容,新建页面并打印,可解决打印某页面中的部分内容的问题.使用方法:将要打印的内容通过 <span id="dayin"> ...
- PHPExcel使用收藏
注意:PHP7版本中phpexcel导出文件是提示找不到文件,需修改PHPExcel目录下的calculation目录下的Functions.php的581行 去掉break; 下面是总结的几个使用 ...
- linux 下使用exp/imp 或者expdp/impdp导出导入oracle数据表数据
一.环境配置 1.执行环境: exp/imp可以在客户端执行也可以在服务器端执行,在客户端执行需要先安装有oracle的客户端,如果是linux系统,就是以oracle用户登录,在控制台下执行.建议在 ...
- Masonry基本用法
使用步骤: 1.导入框架 2.导入头文件,或者直接导入.pch文件中 //省略前缀 'max_'的宏: #define MAS_SHORTHAND // 自动装箱:自动把基本数据类型转化成对象,int ...
- HDU4704:Sum(欧拉降幂公式)
Input 2 Output 2 Sample Input 2 由公式,ans=2^(N-1)%Mod=2^((N-1)%(Mod-1)+(Mod-1)) %Mod. 注意:降幂的之后再加一个Mod- ...
- 最好的6个Go语言Web框架
原文:Top 6 web frameworks for Go as of 2017 作者:Edward Marinescu 译者:roy 译者注:本文介绍截至目前(2017年)最好的6个Go语言Web ...