<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. 关于申请GMS认证来使用谷歌的一些服务应用及闭源API

    房间内的主要大象正在获取Google移动服务(GMS)的许可证.这是指预先选择的谷歌应用程序阵列,它将谷歌本身的精髓包含在其配置中 -  Google搜索,YouTube,Gmail,Chrome,G ...

  2. 使用jar包格式化Docker 容器日志

    前面使用JS格式化textarea中的日志内容,但局限于JS语言性能,在日志内容较多时效率无法接受,建议日志内容大于5000行时转投本java程序,文末提供jar包下载. LogsFormat.jav ...

  3. BATCH+VBS脚本自动执行命令

    打开cmd,然后执行run.bat s 1就会执行tmpsw.vbs的内容,1是作为id传进去的参数. run.bat: @echo off set type=%1 set id=%2 :打开一个te ...

  4. [mstsc]解决win8 win10 平板无法被mstsc连接的问题

    问题如下: https://answers.microsoft.com/zh-hans/windows/forum/windows_8-performance/win8%E6%97%A0%E6%B3% ...

  5. Git服务器Gogs简易安装-Windows环境

    1.下载git for windows https://github.com/git-for-windows/git/releases/download/v2.15.0.windows.1/Git-2 ...

  6. 【洛谷P1134 阶乘问题】

    [传送门] #include<bits/stdc++.h> using namespace std; int main() { ; cin>>a; ;i<=a;i++) ...

  7. kafka全部数据清空与某一topic数据清空

    1. Kafka全部数据清空 kafka全部数据清空的步骤为: 停止每台机器上的kafka: 删除kafka存储目录(server.properties文件log.dirs配置,默认为“/tmp/ka ...

  8. [物理学与PDEs]第3章第2节 磁流体力学方程组 2.1 考虑到导电媒质 (等离子体) 的运动对 Maxwell 方程组的修正

    1.  Maxwell 方程组 $$\bee\label{3_2_1_Maxwell} \bea \Div{\bf D}&=\rho_f,\\ \rot{\bf E}&=-\cfrac ...

  9. Xss Bypass备忘录

    Xss Bypass备忘录 技术要发展,免不了风波. 也许这些攻攻防防会更好的促进技术的发展也说不定 就让这一次次的爆破换来将来更精练的技术的无比的宁静吧 我们静观其变吧! 缅怀当初那份最纯真Hack ...

  10. if判断中的true和false

    真值指的是在 布尔值 上下文中转换后(使用强制类型转换)的值为真的值.所有值都是真值,除非它们被定义为 falsy (即除了 false,0,"",null,undefined 和 ...