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 ...
随机推荐
- Ueditor注意的地方
复制粘贴内容到编辑器上时,一些标签的属性会被过滤,在config.js里添加白名单配置项,例如: whitList: { a: ['target', 'href', 'title', 'class', ...
- properties文件操作
properties文件操作类 可以使用java.util.Properties读取.properties文件中的内容 import java.io.InputStream; import java. ...
- vue数组中对象属性变化页面不渲染问题
问题引入 Vue之所以能够监听Model状态的变化,是因为JavaScript语言本身提供了Proxy或者Object.observe()机制来监听对象状态的变化.但是,对于数组元素的赋值,却没有办法 ...
- 使用item来封装数据:
一.item和field类: 1.使用Item类: 创建了类Bookitem,然后就可以使用: 2.item_pipeline: 我们可以使用item_pipeline对爬取的数据进行处理. 步骤: ...
- java 11 标准Java异步HTTP客户端
这是 Java 9 开始引入的一个处理 HTTP 请求的的 HTTP Client API,该 API 支持同步和异步,而在 Java 11 中已经为正式可用状态,你可以在 java.net 包中找到 ...
- Spring Cloud Data Flow 中的 ETL
Spring Cloud Data Flow 中的 ETL 影宸风洛 程序猿DD 今天 来源:SpringForAll社区 1 概述 Spring Cloud Data Flow是一个用于构建实时数据 ...
- sublime text 批量删除空白行
CTRL+H打开replace功能,勾选上左侧的regular expression,并填写 find what栏 : \s+$ (正则表达式)replace with栏 : (这行留空) 接着点r ...
- django - 总结
0.html-socket import socket def handle_request(client): request_data = client.recv(1024) print(" ...
- Spring Security 之API 项目安全验证(基于basic-authentication)
===================================Basic Authorization 规范===================================Request ...
- [物理学与PDEs]第3章第3节 电导率 $\sigma$ 为无穷时的磁流体力学方程组 3.3 磁场线``冻结''原理
磁场线``冻结''原理: 在 $\sigma=\infty$ 时, 初始时刻分布在同一磁场线上的质点, 在运动过程中会一直保持在同一磁场线上, 即磁场线好像``冻结''在物质上. 事实上, $\cfr ...