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 ...
随机推荐
- django模型的字段查询
条件运算符 exact: 查判等 list=BookInfo.objects.filter(id__exact=1) 可简写为: list=BookInfo.objects.filter(id=1) ...
- 基于pygame的打砖块游戏,做到一半,不带做了
跟着一个博主做的,前面的变量的定义全是内个哥们的,没带任何改动,就做了个界面,背景音乐,绘制了个小球,绘制了挡板 小球可以撞到边界反弹,然后做了砖块,定义了一个存放砖块的列表,,,就没有下文了 原博主 ...
- dz论坛Discuz_X3.4最新网站漏洞
近期我们sinesafe安全部门审计discuz最新版的时候发现配置文件写入导致代码执行的问题.cms安装的时候一般会分为几个步骤去进行,其中有对配置文件config进行写入的步骤,当写入的时候未严格 ...
- n点游戏
n点游戏 24点游戏是非常经典而简单的小游戏,从一堆扑克牌中抽取4张,向其中添加运算符号并使其运行结果恰等于24,这叫作24点游戏. 现在我们不再是组合24,而是组合出给定的数字n,但要求只可以利用任 ...
- vue---day04
1. Node.js 1.1 介绍: - Node.js 是一个JavaScript运行环境,实质上是对Chrome V8引擎的封装. - Node.js 不是一个 JavaScript 框架,不同于 ...
- 20145202马超 2006-2007-2 《Java程序设计》第2周学习总结
20145202马超 2016-2017-2 <Java程序设计>第2周学习总结 教材学习内容总结 第三章主要讲了各种变量的设置以及流程控制,基本上都和c是一样的.print是不太一样的, ...
- P1991 无线通讯网
P1991 无线通讯网 题目描述 国防部计划用无线网络连接若干个边防哨所.2 种不同的通讯技术用来搭建无线网络: 每个边防哨所都要配备无线电收发器:有一些哨所还可以增配卫星电话. 任意两个配备了一条卫 ...
- PIC32MZ 通过U盘在线升级 -- USB Host bootloader
了解bootloader的实现,请加QQ: 1273623966(验证填bootloader); 欢迎咨询或定制bootloader; 我的博客主页 www.cnblogs.com/geekygeek ...
- pytest 测试报告
测试报告 运行测试用例后,为了保存结果,我们需要生成测试报告,同时可以把运行的测试报告发送相关人员查阅,这时需要安装一个插件(pytest-html) pytest-html插件安装 pip inst ...
- linux下 su 与 su - 的区别和使用
Linux下su与su -命令的区别 在启动服务器ntpd服务时遇到一个问题 使用 su root 切换到root用户后,不可以使用service命令: 使用 su - 后,就可以使用servic ...