vue 获取元素下的所有div_vue获取dom元素高度的方法

获取高度：

要在钩子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

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

=====我是li标 ...

Vue 获取dom元素之 ref 和 $refs 详解

一.$refs 一个对象,持有ref注册过的所有元素或子组件.(注册过的 ref 的集合) 二.ref 被用来给元素或子组件注册引用信息.若用在dom元素上,引用指向的就是dom元素:若用在子组件上, ...

Vue获取DOM元素样式 && 样式更改

在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 'style' is not definde的错误, 这时候可以在 mounted 里用 $refs 来获取样 ...

随机推荐

ios--进程/多线程/同步任务/异步任务/串行队列/并行队列(对比分析)

现在先说两个基本的概念,啥是进程,啥是线程,啥又是多线程;先把这两个总是给弄清再讲下面的 进程:正在进行的程序,我们就叫它进程. 线程:线程就是进程中的一个独立的执行路径.这句话怎么理解呢! 一个程序 ...

nginx配置文件nginx.conf超详细讲解

#nginx进程,一般设置为和cpu核数一样worker_processes 4;                        #错误日志存放目录 error_log  /data1/logs/er ...

leetcode@ [129] Sum Root to Leaf Numbers (DFS)

https://leetcode.com/problems/sum-root-to-leaf-numbers/ Given a binary tree containing digits from 0 ...

CSS的三种样式：内联式，嵌入式，外部式以及他们的优先级

从CSS 样式代码插入的形式来看基本能够分为下面3种:内联式.嵌入式和外部式三种. 1:内联式css样式表就是把css代码直接写在现有的HTML标签中,如以下代码:

新建web project不自动生成web.xml解决方案

一步一步建立Web Project ,第3步会有 “Generate Web.xml deployment descriptor”,默认没勾选,勾上就行了

js实现Mac触摸板双指事件(上、下、左、右、放大、缩小)

前言 这几天在修复一个web问题时,需要捕获Mac触摸板双指事件(上.下.左.右.放大.缩小),但发现并没有现成的轮子,还是要自己造. 例如:jquery.mousewheel.js(添加跨浏览器的鼠 ...

使用微软自带 SharpZipLib 进行多文件 压缩

/// /// 指定路径打包下载 /// /// &lt ...

Opencv画图操作

1. 画矩形 MyRect rect;rect.left = 5;rect.top = 5;rect.right = 100;rect.bottom = 100;IplImage * pColorIm ...

python 中面向对象的概念

原文 域和作用空间 本地域,函数域(nonlocal)和 全局域(global) def scope_test(): def do_local(): spam = "local spam&q ...

Python之旅：数据类型、字符编码、文件处理

一 引子 1 什么是数据? x=10,10是我们要存储的数据 2 为何数据要分不同的类型 数据是用来表示状态的,不同的状态就应该用不同的类型的数据去表示 3 数据类型 以下每个类型都是有详细介绍链接的 ...