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 来获取样 ...
随机推荐
- iOS开发——高级篇——FMDB 数据库简单使用
#import <Foundation/Foundation.h> @interface UserDB : NSObject // 把userDB设计成一个单例类 + (id)shareI ...
- C++ 函数部分(1)
1.编写一个求X的n次方的函数 .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas ...
- YTU 2900: F-A Simple Question
2900: F-A Simple Question 时间限制: 1 Sec 内存限制: 128 MB 提交: 66 解决: 24 题目描述 今天,pasher打算在一个浪漫的花园和他的搭档们聚餐, ...
- jQuery简单纯文字提示条
如何制作jQuery简单纯文字提示条,先介绍提示条(tooltip)的意思是用户鼠标悬停经过事件发生提示title.它们已经呈现在大多数浏览器中,当你可以提供一个链接或图片的title属性,就是用户将 ...
- Java String 和 new String()的区别
Java String 和 new String()的区别 本文转自:http://www.cnblogs.com/heima-jieqi/archive/2012/04/10/2440086.htm ...
- excel+requests管理测试用例接口自动化框架
背景: 某项目有多个接口,之前使用的unittest框架来管理测试用例,将每个接口的用例封装成一个py文件,接口有数据或者字段变动后,需要去每个py文件中找出变动的接口测试用例,维护起来不方便,为了便 ...
- Tensorflow卷积接口总结
tf.nn.conv2d(input, filter, strides, padding, use_cudnn_on_gpu=None, name=None) 这个接口用了这么久,每次都有点迷惑,这里 ...
- Gym 100962J Jimi Hendrix (树形DP)
题意:给定一棵树,然后每条边有一个字母,然后给定一行字符串,问你能不能从这棵树上找到,并输出两个端点. 析:树形DP,先进行递归到叶子结点,然后再回溯,在回溯的时候要四个值,一个是正着匹配的长度和端点 ...
- python 模块 module 规范
# /usr/bin/python # -*- coding=utf-8 -*- """This is a standard module""&quo ...
- bzoj 3629: [JLOI2014]聪明的燕姿【线性筛+dfs】
数论+爆搜 详见这位大佬https://blog.csdn.net/eolv99/article/details/39644419 #include<iostream> #include& ...