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 来获取样 ...
随机推荐
- unix2dos/dos2unix
dos2unix命令用来将DOS格式的文本文件转换成UNIX格式的(DOS/MAC to UNIX text file format converter).DOS下的文本文件是以\r\n作为断行标志的 ...
- mysql04--存储过程
过程:若干语句,调用时执行封装的体.没有返回值的函数. 函数:是一个有返回值的过程 存储过程:把若干条sql封装起来,起个名字(过程),并存储在数据库中. 也有不存储的过程,匿名过程,用完就扔(mys ...
- ARM WFI和WFE指令【转】
本文转载至:http://www.wowotech.net/armv8a_arch/wfe_wfi.html 1. 前言 蜗蜗很早以前就知道有WFI和WFE这两个指令存在,但一直似懂非懂.最近准备研究 ...
- UVALive3415 Guardian of Decency —— 最大独立集
题目链接:https://vjudge.net/problem/UVALive-3415 题解: 题意:选出尽可能多的人, 使得他(她)们之间不会擦出火花.即求出最大独立集. 1.因为性别有男女之分, ...
- POJ3186 Treats for the Cows —— DP
题目链接:http://poj.org/problem?id=3186 Treats for the Cows Time Limit: 1000MS Memory Limit: 65536K To ...
- 8 个很有用的 jQuery 技巧(转)
http://www.oschina.net/question/12_145472 一个基于web的标签设计,打印工具,超diao http://www.oschina.net/question/17 ...
- CodeForces 723B Text Document Analysis (水题模拟)
题意:给定一行字符串,让你统计在括号外最长的单词和在括号内的单词数. 析:直接模拟,注意一下在左右括号的时候有没有单词.碰到下划线或者括号表示单词结束了. 代码如下: #pragma comment( ...
- [App Store Connect帮助]七、在 App Store 上发行(2.1)设定价格与销售范围:为您的 App 设定价格
在您提交 App 以供审核之前,您必须为您的 App 设定一个价格,该价格将用于 App Store 的所有地区.如果您没有<付费应用程序协议>,则只能选择免费. 必要职能:“帐户持有人” ...
- java多线程模拟龟兔赛跑
让乌龟和兔子在同一个赛道从1开始跑到100,看看谁更快. public class Racer implements Runnable{ private static String winner;// ...
- 版本管理工具 Git
Git是目前世界上最先进的分布式版本控制系统(没有之一). 文章参考来源: https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248 ...