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 获取元素高度的更多相关文章

  1. Vue 获取元素样式 元素高度

    看到这个问题我第一时间想的竟然是JS 不知道你是怎么想的 不过昨天有一个小哥哥 问我一个Vue的 哈哈哈 get了 我当时问他为什么不用JS获取 他说 这个性能更高 那我们来看看这个高性能的获取元素高 ...

  2. Jquery获取元素高度

    第一步, 获取你要得到高度的那个div的jQuery对象, 获得方法有很多很多种, 具体你可以看一下jQuery API文档里的选择器部分, 在这里我只跟你说一个最直接的方法, 通过id获得: $(& ...

  3. uniapp 获取元素高度 距离顶部高度等

    let _this=this let height="" const query = uni.createSelectorQuery() query.select('#u-drop ...

  4. 【jquery】获取元素高度

    1. $("#div_id").height(); // 获得的是该div本身的高度, (不包含padding,margin,border)2. $("#div_id&q ...

  5. 获取元素高度及定位js

    <script type="text/javascript">                                   $(window).scroll(f ...

  6. 「jQuery」获取元素的高度

    在jQuery中,获取元素高度的方法有3个:height().innerHeight().outerHeight(); 顺带记一下元素的盒模型: height(高度), padding(内边距), m ...

  7. JS获取元素CSS值的各种方法分析

    先来看一个实例:如何获取一个没有设置大小的字体? <!DOCTYPE html> <html lang="en"> <head> <met ...

  8. 获取元素CSS值之getComputedStyle方法熟悉

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2378 一.碎碎念~前 ...

  9. getComputedStyle方法获取元素CSS值

    javascript的style属性只能获取内联样式,对于外部样式和嵌入式样式需要用currentStyle属性.但是,currentStyle在FIrefox和Chrome下不支持,需要用getCo ...

随机推荐

  1. 加分二叉树 vijos1991 NOIP2003第三题 区间DP/树形DP/记忆化搜索

    描述 设一个n个节点的二叉树tree的中序遍历为(l,2,3,-,n),其中数字1,2,3,-,n为节点编号.每个节点都有一个分数(均为正整数),记第i个节点的分数为di,tree及它的每个子树都有一 ...

  2. CentOS 7 编译错误解决方法集合

    解决 error: the HTTP XSLT module requires the libxml2/libxslt 错误 yum -y install libxml2 libxml2-dev yu ...

  3. vue 遮罩层阻止默认滚动事件

    vue中提供 @touchmove.prevent 方法可以完美解决这个问题. <div class="child" @touchmove.prevent ></ ...

  4. xenomai内核解析之xenomai的组成结构

    @ 目录 一.xenomai 3 二.xenomai3 结构 这是第二篇笔记. 一.xenomai 3 从xenomai3开始支持两种方式构建linux实时系统,分别是cobalt 和 mercury ...

  5. SQLite使用(一)

    简单介绍SQLite常用API: int sqlite3_open( const char *filename, /* Database filename (UTF-8) */ sqlite3 **p ...

  6. UIResponder相关

    UIResponder是OC中一个响应事件的类.UIApplication.UIView.UIViewController都是它的子类.UIWindow是UIView的子类,因此也能响应事件. UIR ...

  7. turtle库应用实例-五角星绘制

    五角星绘制 ‪‬‪‬‪‬‪‬‪‬‮‬‪‬‮‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‪‬‪‬‪‬‪‬‪‬‪‬‮‬‭‬‫‬‪‬‪‬‪‬‪‬‪‬‮‬‫‬‪‬‪‬‪‬‪‬‪‬‪‬‮‬‫‬‭‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬ ...

  8. 基本Linux命令(上)

           Linux的难点在于我们需要记忆大量的命令及参数.如有问题请批评指正,在下感激不尽.        Linux的命令都是在shell下使用的,也就是我们常说的终端(Terminal).包 ...

  9. GoF23:建造者模式

    目录 概念 角色分析 实现方式 方式一 角色分析 代码编写 方式二 角色分析 代码编写 总结 优点 缺点 应用场景 建造者也抽象工厂模式的比较 ​ 建造者模式也属于创建型模式,它提供了一种创建对象的最 ...

  10. 你真的知道C语言里extern "C" 的作用吗?

    经常在C语言的头文件中看到下面的代码: #ifdef __cplusplus extern "C" { #endif // all of your legacy C code he ...