Vue获取DOM元素样式 && 样式更改
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 'style' is not definde的错误,
这时候可以在 mounted 里用 $refs 来获取样式,并进行更改:
<template>
<div style="display: block;" ref="abc">
<!-- ... -->
</div>
</template>
<script>
export default {
mounted () {
console.log(this.$refs.abc.style.cssText)
}
}
</script>
结果是 display: block;
如果我们给一个div设定全屏背景图,就需要获取屏幕高度进行赋值:
<template>
<div ref="nana">
<!-- ... -->
</div>
</template> <script>
export default {
mounted () {
let w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; this.$refs.nana.style.height = h +'px'; } } </script>
Vue获取DOM元素样式 && 样式更改的更多相关文章
- vue获取dom元素高度的方法
获取高度: <div ref="自定义名称" > </div>要在钩子mounted里面dom结构生成后去获取dom的高度,宽度,修改样式等操作!!! mo ...
- 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元素的属性值
项目中需要做一个小弹层,如下图: 我需要知道点击元素距离顶部的值,再计算弹层的top值,如下图: 在vue中如何获取到DOM元素距离窗口顶部的值呢? 1.通过$event获取 html: <di ...
- Vue获取dom元素
<li @click='获取li标签' :ref="center-li" id="center-li" > =====我是li标 ...
- Vue 获取DOM元素ref
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue 获取dom元素之 ref 和 $refs 详解
一.$refs 一个对象,持有ref注册过的所有元素或子组件.(注册过的 ref 的集合) 二.ref 被用来给元素或子组件注册引用信息.若用在dom元素上,引用指向的就是dom元素:若用在子组件上, ...
- Vue 获取dom元素中的自定义属性值
方法一: HTML <div id="app"> <button @click="getData($event,'100')">点我&l ...
随机推荐
- JavaSE 第二次学习随笔(四)
---------------------------------------------------------------------------------------------------- ...
- C语言程序设计·谭浩强(第四版)第二章课后习题的答案,算法——程序的灵魂
C语言程序小练习 1.用C语言设计程序算出1-1/2+1/3-14+1/5...+1/99-1/100的值 #include<stdio.h> int main() { ; double ...
- clear()、sync()、ignore()
#include <iostream> using namespace std; int main() { int a; cin>>a; cout<<cin.rds ...
- SPLIT(文字列の分割)
概要 SPLIT命令は特定の文字で値を分割する命令だ.タブ区切りや.カンマ区切り等のファイルからデータを取得し値を各項目に振り分けたい時に使用する事が多いだろう.また.XMLファイル等を使用してインタ ...
- python2.7入门---面向对象
Python从设计之初就已经是一门面向对象的语言,正因为如此,在Python中创建一个类和对象是很容易的.所以,这篇文章我们来记录下Python的面向对象编程.如果你以前没有接触过面向对象的编 ...
- java 第六章 面向对象基础
1.面向对象编程思想 面向过程编程 传统的C语言属于面向过程编程.面向过程解决问题的思路:通常是分析出解决问题所需要的步骤,然后用方法把这些步骤一步一步实现,最后一个一个依次调用方法来解决. 面向过程 ...
- nginx+tomcat 反向代理 负载均衡配置
1.nginx的安装和配置见:http://www.cnblogs.com/ll409546297/p/6795362.html 2.tomcat部署项目到对应的服务器上面并启动,不详解 3.在ngi ...
- FRDM-KL25Z开发板上电试用
1. 硬件平台:FRDM-KL25Z开发板,先看下板子,Cortex M0+的内核,板子上自带MMA8451Q的三轴加速度传感器,触摸滑动按键,openSDA调试器.MCU主频48MHz,有16KB ...
- 虚拟接VMnet1 和VMnet8的区别
vmnet1是host-only,也就是说,选择用vmnet1的话就相当于VMware给你提供了一个虚拟交换机,仅将虚拟机和真实系统连上了,虚拟机可以与真实系统相互共享文件,但是虚拟机无法访问外部互联 ...
- 代码混淆 iOS
该方法只能针对有.m.h的类进行混淆,静态库等只有.h文件的没法进行混淆 代码混淆,刚刚看到是不是有点懵逼,反正我是最近才接触到这么个东西,因为之前对于代码和APP,只需要实现功能就好了,根本没有考虑 ...