<template>
<div id="topInfo" ref="topInfo" style="width: 200px;height: 200px;background-color: #0bb20c">
<img id="imgInfo" ref="imgInfo" src="./20151205231902_xe2kG.jpeg" alt="" height="200px" >
</div>
</template> <script>
export default {
name: "center",
mounted() {
//div 标签获取的方法
let topInfowidth = this.$refs.topInfo.style.width;
let topInfoheight = this.$refs.topInfo.style.height;
console.log("topInfo:"+topInfowidth+" "+topInfoheight) console.log("=================================================")
//img 标签获取的方法
let imgInfowidth = this.$refs.imgInfo.width;
let imgInfoheight = this.$refs.imgInfo.height;
console.log("imgInfo:"+imgInfowidth+" "+imgInfoheight)
let src = this.$refs.imgInfo.src;
console.log("src:"+src) } //获取dom元素高度通过在标签里面定义ref属性,用this.$refs.自定义名称.offsetHight;去获取。
}
</script> <style scoped>
#topInfo{
overflow: hidden;
}
</style>

注意:需要在mounted中才能获取到

vue 获取dom的css属性值的更多相关文章

  1. Vue获取DOM元素的属性值

    项目中需要做一个小弹层,如下图: 我需要知道点击元素距离顶部的值,再计算弹层的top值,如下图: 在vue中如何获取到DOM元素距离窗口顶部的值呢? 1.通过$event获取 html: <di ...

  2. JS中使用document.defaultView.getComputedStyle()、currentStyle()方法获取CSS属性值

    在对网页进行调试的过程中,经常会用到js来获取元素的CSS样式,方法有很多很多,现在仅把我经常用的方法总结如: 1. obj.style:这个方法只能JS只能获取写在html标签中的写在style属性 ...

  3. js原生获取元素的css属性

    习惯了用jQuery的css()的方法获取元素的css属性,突然不用jquery了,当要获得元素的css时候,我瞬间停顿了一下,咦?咋获取元素的css值?比如获取元素的width.是这样么?docum ...

  4. Vue获取dom和数据监听

    Vue获取dom对象 在js和jq中我们都能获取dom对象例如 // 获取id=1的div标签 <div id=d1>dom对象</div> // js语法 let ele = ...

  5. js 获取DOM的style属性

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. orm获取关联表里的属性值

    ORM——关系对象模型 laravel中的Eloquent ORM用于和数据表互动,其中每个数据库表会和一个对应的「模型」互动,想要了解请查看官方文档或自行百度.获取关联表里的属性值代码如下: /** ...

  7. python通过win32api轻松获取控件的属性值

    1.如何利用句柄操作windows窗体 首先,获得窗体的句柄  win32api.FindWindows() 第二,获得窗体中控件的id号,spy++ 第三,根据控件的ID获得控件的句柄(hwnd)  ...

  8. jquery获取当前选项的属性值a

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  9. 获取JSON对象的属性值

    1.问题背景 有一个json对象,其中有键值对,那怎样获取json对象中属性值 2.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

随机推荐

  1. 用UE4蓝图制作FPS_零基础学虚幻4第二季

    课时1:案例演示 05:12 课时2:工程准备 07:35 (把一个项目从一个工程移动到另一个工程) 1.新建一个空白工程,不包含初学者内容 2.选择我们要复制的工程,按右键,如下图: 复制到新工程的 ...

  2. windows 8.1 cmd命名提示符全屏

    在 C:\Users\wy\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\System Tools 目录下,右键命令提示符-属性中修改:

  3. Python import hook

    转自http://blog.konghy.cn/2016/10/25/python-import-hook/,这里有好多好文章 import hook 通常被译为 探针.我们可以认为每当导入模块的时候 ...

  4. golang的socket服务端与客户端

    服务端 服务端的处理流程 监听端口 接收客户端的链接 创建goroutine,处理该链接 package main import ( "fmt" "net" ) ...

  5. Docker:常用命令大全 [七]

    一.docker的命令的解释 1.命令解释 docker run -d -p 80:80 nginx run (创建并运行一个容器) -d 放在后台 -p 端口映射 nginx docker镜像的名字 ...

  6. SpringCloud笔记二:搭建项目基础框架

    目录 搭建框架 新建父工程 新建子工程api 新建子工程提供者provider 新建消费者consumer 总结 搭建框架 我们的SpringCloud微服务框架是父子工程,有一个父工程,剩下的都是子 ...

  7. MySql实现分页查询的SQL,mysql实现分页查询的sql语句 (转)

    http://blog.csdn.net/sxdtzhaoxinguo/article/details/51481430 摘要:MySQL数据库实现分页查询的SQL语句写法! 一:分页需求: 客户端通 ...

  8. python3 asyncio-协程模块测试代码

    import time import asyncio #统计运行时间的装饰器 def run_time(func): def wrapperfunc(*argv, **kwargv): now = l ...

  9. dubbo启动时检查服务

    Dubbo 缺省会在启动时检查依赖的服务是否可用,不可用时会抛出异常,阻止 Spring 初始化完成,以便上线时,能及早发现问题,默认 check="true". 可以通过 che ...

  10. Spring Cloud 2-Feign 声明式服务调用(三)

    Spring Cloud Feign  1. pom.xml 2. application.yml 3. Application.java 4. Client.java 简化RestTemplate调 ...