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 ...
随机推荐
- linux下find命令的使用和总结
背景:find命令十分的好用,特别是在查找文件的时候,这个时候需要和文件通配符一起使用. 1 前言 我们为什么要学会使用find命令? 每一种操作系统都有成千上万的文件组成,对于linux这样“一切皆 ...
- 社交系统ThinkSNS+安装部署演示
ThinkSNS(简称TS),一款全平台综合性社交软件系统,10年来为国内外大中小企业和创业者提供社交化软件研发及技术解决方案.目前有ThinkSNS V4.ThinkSNS+两个并行系统. Thin ...
- 清北学堂Day2
算数基本定理: 1.整数及其相关 2.唯一分解定理 对于任意的大于1的正整数N,N一定能够分解成有限个质数的乘积,即 其中P1<P2<...<Pk,a1,a2,...,ak>= ...
- 在 Angular6 中使用 HTTP 请求服务端数据
第一步 准备好api接口地址, 例如 https://api.example.com/api/ 第二步 在根组件 app.module.ts 中引入 HttpClientModule 模块. // a ...
- pytest 9 pytest-datadir读取文件信息
安装:pip install pytest-datadir 介绍:用于操作测试数据目录和文件的插件.pytest-datadir他会寻找包含测试模块名字的文件夹或者全局的一个文件夹名字为data下的数 ...
- np.array.all()和np.array.any()函数
np.array.all()是对np.array中所有元素进行与操作,然后结果返回True或False np.array.any()是对np.array中所有元素进行或操作,然后结果返回True或Fa ...
- 连接SQL Server数据库
SqlConnection来连接数据库,注意数据库目标的格式. using System.Data.SqlClient;//载入数据库命名空间 namespace WindowsFormsApplic ...
- (二叉树 DFS 递归) leetcode 112. Path Sum
Given a binary tree and a sum, determine if the tree has a root-to-leaf path such that adding up all ...
- 2017-12-19python全栈9期第四天第二节之列表的增删改查之切片
#!/user/bin/python# -*- coding:utf-8 -*-li = ['zd',[1,3,4,5,6],'ls','ww','zl']l1 = li[0]print(l1)l2 ...
- Numpy系列(四)- 索引和切片
Python 中原生的数组就支持使用方括号([])进行索引和切片操作,Numpy 自然不会放过这个强大的特性. 单个元素索引 1-D数组的单元素索引是人们期望的.它的工作原理与其他标准Python序 ...