Vue获取DOM元素样式和样式更改示例


Posted in Javascript onMarch 07, 2017

在 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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery实现倒计时按钮的实现代码
Mar 23 Javascript
jQuery之排序组件的深入解析
Jun 19 Javascript
javascript中apply和call方法的作用及区别说明
Feb 14 Javascript
jquery进行数组遍历如何跳出当前的each循环
Jun 05 Javascript
JavaScript-RegExp对象只能使用一次问题解决方法
Jun 23 Javascript
JS解析XML文件和XML字符串详解
Apr 17 Javascript
学习JavaScript鼠标响应事件
Dec 25 Javascript
js事件冒泡与事件捕获详解
Feb 20 Javascript
vue2笔记 — vue-router路由懒加载的实现
Mar 03 Javascript
vue删除html内容的标签样式实例
Sep 13 Javascript
vue2.0中set添加属性后视图不能更新的解决办法
Feb 22 Javascript
vue二选一tab栏切换新做法实现
Jan 19 Vue.js
原生JavaScript实现Tooltip浮动提示框特效
Mar 07 #Javascript
基于JavaScript实现图片剪切效果
Mar 07 #Javascript
详解Vue2 无限级分类(添加,删除,修改)
Mar 07 #Javascript
js放到head中失效的原因与解决方法
Mar 07 #Javascript
Bootstrap媒体对象学习使用
Mar 07 #Javascript
angular十大常见问题
Mar 07 #Javascript
Bootstrap表单控件学习使用
Mar 07 #Javascript
You might like
php中常用字符串处理代码片段整理
2011/11/07 PHP
for循环连续求和、九九乘法表代码
2012/02/20 PHP
PHP中设置时区方法小结
2012/06/03 PHP
php过滤html标记属性类用法实例
2014/09/23 PHP
php绘制一个扇形的方法
2015/01/24 PHP
thinkphp框架实现删除和批量删除
2016/06/29 PHP
javascript的函数
2007/01/31 Javascript
鼠标滑在标题上显示图片的JS代码
2013/11/19 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
2014/04/15 Javascript
原生的html元素选择器类似jquery选择器
2014/10/15 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
2016/05/30 Javascript
js中获取键盘事件的简单实现方法
2016/10/10 Javascript
js实现小窗口拖拽效果
2016/12/03 Javascript
深入理解JavaScript中的尾调用(Tail Call)
2017/02/07 Javascript
JS异步文件上传(兼容IE8+)
2017/04/02 Javascript
微信小程序 swiper组件构建轮播图的实例
2017/09/20 Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
2018/04/03 Javascript
Vue-router 中hash模式和history模式的区别
2018/07/24 Javascript
Python 字典与字符串的互转实例
2017/01/13 Python
PyCharm设置护眼背景色的方法
2018/10/29 Python
django mysql数据库及图片上传接口详解
2019/07/18 Python
python实现机器人卡牌
2019/10/06 Python
超实用的 30 段 Python 案例
2019/10/10 Python
Python单例模式的四种创建方式实例解析
2020/03/04 Python
Python HTMLTestRunner库安装过程解析
2020/05/25 Python
python实现数字炸弹游戏程序
2020/07/17 Python
Python 利用Entrez库筛选下载PubMed文献摘要的示例
2020/11/24 Python
绝对令人的惊叹的CSS3折叠效果(3D效果)整理
2012/12/30 HTML / CSS
详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
2016/12/20 HTML / CSS
职工代表大会主持词
2014/04/01 职场文书
小学师德师风演讲稿
2014/09/02 职场文书
说好普通话圆梦你我他演讲稿
2014/09/21 职场文书
新店开张宣传语
2015/07/13 职场文书
Python Django搭建文件下载服务器的实现
2021/05/10 Python
Pandas实现DataFrame的简单运算、统计与排序
2022/03/31 Python
基于Android10渲染Surface的创建过程
2022/08/14 Java/Android