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. 新手上路:Laravel-控制器基础

    1.控制器在哪 Controller目录默认存放于app\Htpp\Controllers下,当然,你可以自定义这个目录: Controllers文件夹有一个控制器基类Controller.php,你 ...

  2. Error: Can't find Python executable "G:\Python27"

    错误如题,node-gyp官网介绍不够详细,应设置python.exe的具体绝对路径,如下所示: npm config set python G:\Python27\python.exe 转载于:ht ...

  3. AWS bind: cannot assign requested address

    最近在AWS上安装Redis,遇到一个坑. Redis默认配置文件中有个bind配置项,默认为127.0.0.1.此时只能在服务器内部访问Redis. 为了从服务器外部访问Redis,我给bind添加 ...

  4. P2432 zxbsmk爱查错

    描述:https://www.luogu.com.cn/problem/P2432 给你一个主串以及若干个子串,求最少需要删除几个字母,使得主串能由一些子串组成. dp [ i ] 表示前 i 个字符 ...

  5. 无线脉冲水表LoRaWAN方案芯片ASR6500S

    无线脉冲水表LoRaWAN方案 物联网是新一代信息技术的重要组成部分,也是"信息化"时代的重要发展阶段,在物联网飞速发展的今天,只有多技术融合的物联网解决方案才能够在不同的应用场景 ...

  6. java制作甘特图

    今日来做一下甘特图.网上搜到了这个源码,但是导的jar包,并没有给我.swiftganttdemo但是名为swiftgantt制作:所以灵机一动在网上搜到了swiftangantt组件:在组件中找到了 ...

  7. Flutter 标签类控件大全Chip

    老孟导读:Flutter内置了多个标签类控件,但本质上它们都是同一个控件,只不过是属性参数不同而已,在学习的过程中可以将其放在放在一起学习,方便记忆. RawChip Material风格标签控件,此 ...

  8. 3、Hive-sql优化,数据倾斜处理

    一.Hive-sql优化 #增加reducer任务数量(拉取数量分流) ; #在同一个sql中的不同的job是否可以同时运行,默认为false set hive.exec.parallel=true; ...

  9. 【Spark】Spark必不可少的多种集群环境搭建方法

    目录 Local模式运行环境搭建 小知识 搭建步骤 一.上传压缩包并解压 二.修改Spark配置文件 三.启动验证进入Spark-shell 四.运行Spark自带的测试jar包 standAlone ...

  10. Android 8.1 关机充电动画(三)Android模式

    system:Android 8.1 platform:RK3326/PX30 uboot kernel system/core/healthd Android 8.1 关机充电动画(一)模式选择 A ...