vue如何获取div的宽度_vue获取dom元素高度的方法
获取DOM高度:
要在钩子mounted里面dom结构生成后去获取dom的高度,宽度,修改样式等操作(参照生命周期钩子mounted语法:https://cn.vuejs.org/v2/api/#mounted)
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;去获取。
mounted() {
const _self = this
_self.$nextTick(function() {
_self.winHeight = document.documentElement.clientHeight
_self.headerBoxHeight = _self.$refs.headerBox.offsetHeight
_self.renderTableMaxHeight()
window.onresize = () => {
return (() => {
_self.winHeight = document.documentElement.clientHeight
_self.headerBoxHeight = _self.$refs.headerBox.offsetHeight
_self.renderTableMaxHeight()
})()
}
})
},
methods: {
renderTableMaxHeight() {
this.maxHeight = this.winHeight - this.headerBoxHeight - 214
this.maxHeight = this.maxHeight < 200 ? 200 : this.maxHeight
}
}
注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕,可以用 vm.$nextTick 替换掉 mounted:
mounted: function (){
this.$nextTick(function (){
// Code that will run only after the
// entire view has been rendered
})
}
该钩子在服务器端渲染期间不被调用。
其他获取DOM指定高度的方式:
//获取元素样式值,为元素ref="ele"(在样式里面写死了的高度)
var heightCss = window.getComputedStyle(this.$refs.ele).height; // 获取的值带px像素单位
//获取元素内联样式值
var heightStyle = this.$refs.ele.style.height; // 获取的值带px像素单位
生命周期图示
下图展示了实例的生命周期。你不需要立马弄明白所有的东西,不过随着你的不断学习和使用,它的参考价值会越来越高。
vue如何获取div的宽度_vue获取dom元素高度的方法相关推荐
- vue获取dom元素高度的方法
本文转载自: https://www.cnblogs.com/lhl66/p/7908133.html 作者:lhl66 转载请注明该声明. 获取高度: <div ref="自定义名称 ...
- jsjq:获取div的宽度、高度、屏幕距离方法总结
jq获取div的宽度 只是获取content宽度 var content = $('div'). width(); 获取content+padding的宽度 var contentWithPaddin ...
- 获取div的宽度和高度
获取div的宽度和高度 我最先开始的想法是这样的 获取到div var d = document.getElementById("容器id") 取widthd.width,或者d. ...
- JS动态获取DIV的宽度和高度px!
JS动态获取div的宽度: var o = document.getElementById("div"); var width= o.clientWidth||o.offsetWi ...
- javascript中获取dom元素高度和宽度
javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight ...
- java怎么指定父窗口大小_[Java教程]jQuery如何获取div距离窗口顶部或者父元素顶部的距离...
[Java教程]jQuery如何获取div距离窗口顶部或者父元素顶部的距离 0 2016-01-03 11:00:19 jQuery如何获取div距离窗口顶部或者父元素顶部的距离: 在实际应用或许会需 ...
- js中获取dom元素高度
目录 1.dom元素的宽高 2.鼠标事件中的常用高度宽度: 3. 总结: 4.参考博客: 1.dom元素的宽高 javascript中获取dom元素高度和宽度的方法如下: 网页可视区域宽: docum ...
- python获取div标签的id_Python 获取div标签中的文字实例
预备知识点 compile 函数 compile 函数用于编译正则表达式,生成一个正则表达式( Pattern )对象,供 match() 和 search() 这两个函数使用. 语法格式为: re. ...
- electronjs设置宽度_Js操作DOM元素及获取浏览器高宽的简单方法
在JavaScript中,经常会来获取Document文档元素,是 HTML 文档对象模型的英文缩写,Document Object Model for HTML,是基于浏览器编程,HTML DOM ...
最新文章
- VMware虚拟机 取消 简易安装
- 2040张图片训练出的ViT,准确率96.7%,连迁移性能都令人惊讶 | 南京大学
- office 2007全屏快捷键|设置
- window下Nodejs的部署
- win10里安装和配置flex、bison
- 大学每天打游戏,不是混吃等死是什么?
- 微信Windows 3.3.0内测发布 可以刷朋友圈了
- 引入jQuery的src设置
- Poj 1006 / OpenJudge 2977 1006 Biorhythms/生理周期
- 学习 Shell —— 认识 shell
- 2016年5月25日下午(妙味课堂js预热课程-4笔记一)
- python向上取整_python向上取整-取整,向上
- Dell’Oro 5年期数据中心报告预测25G/100G端口速率市场快速上升
- Ubuntu18.04配置运行Kintinuous
- ABAP ALV(LVC)下拉框或者F4搜索帮助
- qemu内存管理——扁平视图
- 激活MDI中已经打开过的文件
- 【微信小程序】引入Base64 图标库
- ubuntu18.04安装Realsense D435i 摄像头的驱动SDK和ROS Wrapper
- 阴阳师推出AR现世召唤,让式神出现在现实世界
热门文章
- Datamill 一个开源的框架
- javascript 一次开发,多平台运行
- 【机器人】从机械臂示教器导出编码器数据到U盘中的操作步骤
- ViT (Vision Transformer) ---- Transformer Model(1)
- python深度复制_Python直接赋值、浅拷贝和深度拷贝解析
- python logging打印终端_python中那些小众但有用的自带标准库
- Javascript加号的作用、数据类型、输入用户的输入第四课
- c语言综合性程序设计,《C语言程序设计》综合性实验报告撰写格式
- php显示地址栏携带的错误信息_php-fpm搭建及加固
- mysql的varchar 和text_MySQL中char、varchar和text的区别