vue 获取元素高度
1、html
<div ref="getheight"></div> <br><br>
2、JavaScript
// 获取高度值 (内容高+padding+边框)
let height= this.$refs.getheight.offsetHeight; // 获取元素样式值 (存在单位)
let height = window.getComputedStyle(this.$refs.getheight).height; //获取元素内联样式值(非内联样式无法获取)
let height = this.$refs.getheight.style.height; // 注意:要在元素渲染出来才能获取元素的高度
实例:
mounted(){
this.$nextTick(()=>{ // 页面渲染完成后的回调
console.log(this.$refs.getheight.offsetHeight)
})
}
vue 获取元素高度的更多相关文章
- Vue 获取元素样式 元素高度
看到这个问题我第一时间想的竟然是JS 不知道你是怎么想的 不过昨天有一个小哥哥 问我一个Vue的 哈哈哈 get了 我当时问他为什么不用JS获取 他说 这个性能更高 那我们来看看这个高性能的获取元素高 ...
- Jquery获取元素高度
第一步, 获取你要得到高度的那个div的jQuery对象, 获得方法有很多很多种, 具体你可以看一下jQuery API文档里的选择器部分, 在这里我只跟你说一个最直接的方法, 通过id获得: $(& ...
- uniapp 获取元素高度 距离顶部高度等
let _this=this let height="" const query = uni.createSelectorQuery() query.select('#u-drop ...
- 【jquery】获取元素高度
1. $("#div_id").height(); // 获得的是该div本身的高度, (不包含padding,margin,border)2. $("#div_id&q ...
- 获取元素高度及定位js
<script type="text/javascript"> $(window).scroll(f ...
- 「jQuery」获取元素的高度
在jQuery中,获取元素高度的方法有3个:height().innerHeight().outerHeight(); 顺带记一下元素的盒模型: height(高度), padding(内边距), m ...
- JS获取元素CSS值的各种方法分析
先来看一个实例:如何获取一个没有设置大小的字体? <!DOCTYPE html> <html lang="en"> <head> <met ...
- 获取元素CSS值之getComputedStyle方法熟悉
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2378 一.碎碎念~前 ...
- getComputedStyle方法获取元素CSS值
javascript的style属性只能获取内联样式,对于外部样式和嵌入式样式需要用currentStyle属性.但是,currentStyle在FIrefox和Chrome下不支持,需要用getCo ...
随机推荐
- 加分二叉树 vijos1991 NOIP2003第三题 区间DP/树形DP/记忆化搜索
描述 设一个n个节点的二叉树tree的中序遍历为(l,2,3,-,n),其中数字1,2,3,-,n为节点编号.每个节点都有一个分数(均为正整数),记第i个节点的分数为di,tree及它的每个子树都有一 ...
- CentOS 7 编译错误解决方法集合
解决 error: the HTTP XSLT module requires the libxml2/libxslt 错误 yum -y install libxml2 libxml2-dev yu ...
- vue 遮罩层阻止默认滚动事件
vue中提供 @touchmove.prevent 方法可以完美解决这个问题. <div class="child" @touchmove.prevent ></ ...
- xenomai内核解析之xenomai的组成结构
@ 目录 一.xenomai 3 二.xenomai3 结构 这是第二篇笔记. 一.xenomai 3 从xenomai3开始支持两种方式构建linux实时系统,分别是cobalt 和 mercury ...
- SQLite使用(一)
简单介绍SQLite常用API: int sqlite3_open( const char *filename, /* Database filename (UTF-8) */ sqlite3 **p ...
- UIResponder相关
UIResponder是OC中一个响应事件的类.UIApplication.UIView.UIViewController都是它的子类.UIWindow是UIView的子类,因此也能响应事件. UIR ...
- turtle库应用实例-五角星绘制
五角星绘制 ...
- 基本Linux命令(上)
Linux的难点在于我们需要记忆大量的命令及参数.如有问题请批评指正,在下感激不尽. Linux的命令都是在shell下使用的,也就是我们常说的终端(Terminal).包 ...
- GoF23:建造者模式
目录 概念 角色分析 实现方式 方式一 角色分析 代码编写 方式二 角色分析 代码编写 总结 优点 缺点 应用场景 建造者也抽象工厂模式的比较 建造者模式也属于创建型模式,它提供了一种创建对象的最 ...
- 你真的知道C语言里extern "C" 的作用吗?
经常在C语言的头文件中看到下面的代码: #ifdef __cplusplus extern "C" { #endif // all of your legacy C code he ...