vue 获取dom的css属性值
<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属性值的更多相关文章
- Vue获取DOM元素的属性值
项目中需要做一个小弹层,如下图: 我需要知道点击元素距离顶部的值,再计算弹层的top值,如下图: 在vue中如何获取到DOM元素距离窗口顶部的值呢? 1.通过$event获取 html: <di ...
- JS中使用document.defaultView.getComputedStyle()、currentStyle()方法获取CSS属性值
在对网页进行调试的过程中,经常会用到js来获取元素的CSS样式,方法有很多很多,现在仅把我经常用的方法总结如: 1. obj.style:这个方法只能JS只能获取写在html标签中的写在style属性 ...
- js原生获取元素的css属性
习惯了用jQuery的css()的方法获取元素的css属性,突然不用jquery了,当要获得元素的css时候,我瞬间停顿了一下,咦?咋获取元素的css值?比如获取元素的width.是这样么?docum ...
- Vue获取dom和数据监听
Vue获取dom对象 在js和jq中我们都能获取dom对象例如 // 获取id=1的div标签 <div id=d1>dom对象</div> // js语法 let ele = ...
- js 获取DOM的style属性
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- orm获取关联表里的属性值
ORM——关系对象模型 laravel中的Eloquent ORM用于和数据表互动,其中每个数据库表会和一个对应的「模型」互动,想要了解请查看官方文档或自行百度.获取关联表里的属性值代码如下: /** ...
- python通过win32api轻松获取控件的属性值
1.如何利用句柄操作windows窗体 首先,获得窗体的句柄 win32api.FindWindows() 第二,获得窗体中控件的id号,spy++ 第三,根据控件的ID获得控件的句柄(hwnd) ...
- jquery获取当前选项的属性值a
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...
- 获取JSON对象的属性值
1.问题背景 有一个json对象,其中有键值对,那怎样获取json对象中属性值 2.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...
随机推荐
- 自古枪兵幸运E
好梗 求方程的解.n个可以奇数可以偶数,m个必须是偶数 两种方法: 都是O(nlogn)logn是LUCAS定理 法一: 有奇数有偶数,如果都是偶数,那么可以直接除以二然后组合数学 所以枚举有几个奇数 ...
- 题解-洛谷P1303 A*B Problem(高精)
https://www.luogu.org/problemnew/show/P1303(题目传送门) 看到数据范围,显然要用高精度算法(乘法). 首先用字符串读下这最多达10^2000的数,并判断符号 ...
- 用SERVLET进行用户名和密码验证
一.界面展示 二.登录成功显示 三.代码 html <!DOCTYPE html> <html> <head> <meta charset="UTF ...
- 应用调试(四)系统调用SWI
目录 应用调试(四)系统调用SWI 系统调用 SWI代码片段分析 分析sys_write 构造sys_hello 应用程序调用SWI 嵌入汇编语法 测试APP 参考 title: 应用调试(四)系统调 ...
- Object is not a function
如图报了一个这样的错,百度好多都说是函数名和html元素重名的问题.可是这个问题我想我这里是不存在的 可以看到就一个绑定事件,而且id名不是关键字 报错是在$.ajax这一行,索性就把submit-i ...
- 语义化标签和jQuery选择器
关于语义化标签 https://blog.csdn.net/nongweiyilady/article/details/53885433 更详细的语义化标签:https://www.cnblogs.c ...
- HDU 1051(处理木棍 贪心)
题意是处理一批木棍,如果当前处理的木棍长度和重量均大于前一根木棍的长度和重量,则处理当前木棍花费为 0,否则花费为 1. 用结构体存储木棍信息,将木棍按照长度从小到大排序,若长度相等则按照重量从小到大 ...
- Java String相关
一.String类的常用方法 1. int indexOf(String s) 字符串查找 2. int lastIndexOf(String str) 3. char charAt(int inde ...
- Linux中安装C++编译器codeBlock,并配置opencv链接库
1.Linux中安装codeBlock https://blog.csdn.net/xinyunyishui/article/details/50967395 2.CodeBlock中的中文显示不完全 ...
- .net 委托多线程 实时更新界面
Thread thread = new Thread(() => { button2.Invoke(new EventHandler(delegate { button2.Enabled = t ...