当前位置:首页 > 日记 > 正文

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

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>

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

相关文章

ppt2013怎么制作翻书效果ppt2013制

ppt2013怎么制作翻书效果ppt2013制

方法,步骤,翻书,效果,电脑软件,  任何一种较为新鲜的方法都会给别人带来一定的新意,这也是我们争取别人眼球的一个机会,PPT2013中就有制作书籍翻页效果,那么要怎么做呢?下面小编来告诉你吧.ppt2013制作翻书效果的方法点击&ldquo;自选图形&rd…

怎么拆分与合并Word2013中表格的单

怎么拆分与合并Word2013中表格的单

合并,拆分,单元格,表格,电脑软件,  Word可以说是一款排版功能非常强大的软件,我们生活中用到的表格通常都不是固定行列的,Word可以帮你拆分和合并表格中的单元格。以下是小编为您带来的关于拆分和合并Word2013中表格的单元格,希望对您有所帮…

JavaScript数组操作详解

JavaScript数组操作详解

数组操作,详解,电脑软件,JavaScript,1、数组的创建var arrayObj = new Array(); //创建一个数组var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限,是长度var arrayObj = new Array([element0[, element1[, ...[, …

Excel 2016中数据验证功能验证输入

Excel 2016中数据验证功能验证输入

输入,验证,数据验证,错误数据,功能,  在用户日常使用Excel进行大工作量的数据输入时,输入过程中难免会出现输入数据与实际不符的情况。如果输入数据超出了实际的范围,就需要把他们找出来进行改造。以下是小编为您带来的关于Excel 2016中数…

大白话讲解JavaScript的Promise

大白话讲解JavaScript的Promise

大白话,电脑软件,JavaScript,Promise,去年6月份, ES2015正式发布(也就是ES6,ES6是它的乳名),其中Promise被列为正式规范。作为ES6中最重要的特性之一,我们有必要掌握并理解透彻。本文将由浅到深,讲解Promise的基本概念与使用方法。 ES6 Promise 先…

在Word 2013文档中如何制作流程图

在Word 2013文档中如何制作流程图

流程图,文档,电脑软件,Word,  在日常学习和办公中,你有无法画出流程图的困扰吗?其实在Word文档中,就可以轻松搞定流程图。以下是小编为您带来的关于在Word 2013中制作流程图,希望对您有所帮助。在Word 2013中制作流程图1 用Word2013打开一篇…

JavaScrip数组删除特定元素的几种

JavaScrip数组删除特定元素的几种

元素,数组,删除,几种方法,电脑软件,前言可能一说到删除数组特定元素你估计不止一种方法可以实现,那么下面且来看看我总结的这几种方法,可能会对你有所帮助!话不多说了,来一起看看详细的介绍吧。源数组var arr = ["George", "John", "Thoma…

js禁止浏览器页面后退功能的实例 |

js禁止浏览器页面后退功能的实例 |

推荐,浏览器,实例,页面,功能,实例如下所示:<script> $(function(){ if(window.location.href.indexOf("/login") > -1) { //防止页面后退 history.pushState(null, null, document.URL); window.addEventListener('popstate…

excel2013怎么将二维表转换成一维

excel2013怎么将二维表转换成一维

二维,步骤,转换成,电脑软件,表二,  在做数据处理的时候,有的时候为了处理方便我们需要将二维的数据表处理成一维的数据表,excel2013表格要怎么将二维表转换成一维表呢?下面小编整理了excel2013将二维表转换成一维表的步骤,希望对你有帮助!exce…

Node.JS中快速扫描端口并发现局域

Node.JS中快速扫描端口并发现局域

地址,服务器,发现,扫描,端口,在 Node.JS 中进行端口扫描还是比较方便的,一般会有广播和轮询两种方式。即使用广播和扫描,使用广播发出的消息有时会被路由器屏蔽,所以并不可靠。使用node.js中的net模块,可以直接尝试向目录主机的某个端口进行连…

ppt2010怎么去除超链接下划线

ppt2010怎么去除超链接下划线

下划线,超链接,电脑软件,  做PPT时,为了让PPT更加的美观,有超链接时,带有下划线的超链接会影响美观,那么要去掉下划线就会更好看,那么怎么去掉下划线呢?下面下编教你一个最方便,简单的方法吧。ppt2010去除超链接下划线的步骤:  找到要设置无下…

把字体嵌入到ppt的方法步骤

把字体嵌入到ppt的方法步骤

方法,字体,步骤,电脑软件,strong,  当你原本设计好的整个ppt,包括各个字体的格式和排版时,放别人电脑上打开时,所有字体效果都消失了,变成了系统默认的字体,也影响了整个ppt的美观,这时改怎么办呢?下面小编就教你怎么把字体嵌入ppt,希望对你有帮…