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 相关文章推荐
JS类库Bindows1.3中的内存释放方式分析
Mar 08 Javascript
jQuery实现网页抖动的菜单抖动效果
Aug 07 Javascript
JavaScript学习笔记之检测客户端类型是(引擎、浏览器、平台、操作系统、移动设备)
Dec 03 Javascript
JavaScript程序设计之JS调试
Dec 09 Javascript
js 获取元素所有兄弟节点的实现方法
Sep 06 Javascript
jQuery解析返回的xml和json方法详解
Jan 05 Javascript
Vue.directive 自定义指令的问题小结
Mar 04 Javascript
vue微信分享的实现(在当前页面分享其他页面)
Apr 16 Javascript
微信公众平台 发送模板消息(Java接口开发)
Apr 17 Javascript
如何测量vue应用运行时的性能
Jun 21 Javascript
前后端常见的几种鉴权方式(小结)
Aug 04 Javascript
Javascript如何实现扩充基本类型
Aug 26 Javascript
原生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 array_map array_multisort 高效处理多维数组排序
2009/06/11 PHP
PHP+MySQL 制作简单的留言本
2009/11/02 PHP
openflashchart 2.0 简单案例php版
2012/05/21 PHP
php中使用PHPExcel读写excel(xls)文件的方法
2014/09/15 PHP
php结合md5的加密解密算法实例
2016/09/30 PHP
jQuery 连续列表实现代码
2009/12/21 Javascript
关于Jqzoom的使用心得 jquery放大镜效果插件
2010/04/12 Javascript
理解Javascript_12_执行模型浅析
2010/10/18 Javascript
jquery 图片上传按比例预览插件集合
2011/05/28 Javascript
Javascript delete 引用类型对象
2013/11/01 Javascript
Javascript排序算法之计数排序的实例
2014/04/05 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
2014/10/08 Javascript
jQuery+HTML5+CSS3制作支持响应式布局时间轴插件
2016/08/10 Javascript
js+canvas实现滑动拼图验证码功能
2018/03/26 Javascript
js构建二叉树进行数值数组的去重与优化详解
2018/03/26 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
2019/01/24 Javascript
移动端吸顶fixbar的解决方案详解
2019/07/17 Javascript
对Layer UI 模块化的用法详解
2019/09/26 Javascript
es6函数name属性功能与用法实例分析
2020/04/18 Javascript
vue使用openlayers实现移动点动画
2020/09/24 Javascript
js实现移动端轮播图滑动切换
2020/12/21 Javascript
用Python登录Gmail并发送Gmail邮件的教程
2015/04/17 Python
Python之Web框架Django项目搭建全过程
2017/05/02 Python
pyqt5实现按钮添加背景图片以及背景图片的切换方法
2019/06/13 Python
Flask框架学习笔记之使用Flask实现表单开发详解
2019/08/12 Python
Python爬虫实现vip电影下载的示例代码
2020/04/20 Python
DataFrame.groupby()所见的各种用法详解
2020/06/14 Python
python实现粒子群算法
2020/10/15 Python
AmazeUI 等分网格的实现示例
2020/08/25 HTML / CSS
管理科学大学生求职信
2013/11/13 职场文书
护理毕业生自我鉴定
2014/02/11 职场文书
2015年党员个人剖析材料
2014/12/18 职场文书
财务总监岗位职责
2015/02/03 职场文书
药品销售员2015年终工作总结
2015/10/22 职场文书
2019年市场部个人述职报告(三篇)
2019/10/23 职场文书
Python 把两层列表展开平铺成一层(5种实现方式)
2021/04/07 Python