js获取Html元素的实际宽度高度的方法


Posted in Javascript onMay 19, 2016

第一种情况就是宽高都写在样式表里,就比如#div1{width:120px;}。这中情况通过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度。

第二种情况就是宽和高是写在行内中,比如style="width:120px;",这中情况通过上述2个方法都能拿到宽度。

小结,因为id.offsetWidth和id.offsetHeight无视样式写在样式表还是行内,所以我们获取元素宽和高的时候最好用这2个属性。注意如果不是写在行内style中的属性都不能通过id.style.atrr来获取。

现 在的前端制作很少直接把样式写style里了,都是写在样式表里。如果你要获取的样式没有相对应的(就像#div1.style.width对 应#div1.offsetWidth),就只能分别针对不用浏览器来获取样式表的属性了,可以试着搜索“JS 获取样式属性”之类的。

代码:

var o = document.getElementById("view");
var h = o.offsetHeight; //高度
var w = o.offsetWidth; //宽度

以上这篇js获取Html元素的实际宽度高度的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript学习历程和心得小结
Aug 16 Javascript
JavaScript高级程序设计 学习笔记 js高级技巧
Sep 20 Javascript
JS弹出窗口代码大全(详细整理)
Dec 21 Javascript
JS关键字球状旋转效果的实例代码
Nov 29 Javascript
javascript实现状态栏中文字动态显示的方法
Oct 20 Javascript
详解webpack解惑:require的五种用法
Jun 09 Javascript
基于jquery日历价格、库存等设置插件
Jul 05 jQuery
vue实现表格数据的增删改查
Jul 10 Javascript
VueJs组件之父子通讯的方式
May 06 Javascript
tracking.js页面人脸识别插件使用方法
Apr 16 Javascript
Node绑定全局TraceID的实现方法
Nov 14 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
Mar 02 Javascript
js获取隐藏元素宽高的实现方法
May 19 #Javascript
jquery实现无刷新验证码的简单实例
May 19 #Javascript
AngularJs解决跨域问题案例详解(简单方法)
May 19 #Javascript
JavaScript:Array类型全面解析
May 19 #Javascript
JavaScript:Date类型全面解析
May 19 #Javascript
javascript中对Date类型的常用操作小结
May 19 #Javascript
JS Attribute属性操作详解
May 19 #Javascript
You might like
PHP - Html Transfer Code
2006/10/09 PHP
PHP5函数小全(分享)
2013/06/06 PHP
自己写的php中文截取函数mb_strlen和mb_substr
2015/02/09 PHP
微信公众平台开发-微信服务器IP接口实例(含源码)
2017/03/05 PHP
php实现的双色球算法示例
2017/06/20 PHP
PHP验证类的封装与使用方法详解
2019/01/10 PHP
PHP filter_var() 函数, 验证判断EMAIL,URL等
2021/03/09 PHP
HTA版JSMin(省略修饰语若干)基于javascript语言编写
2009/12/24 Javascript
纯JavaScript实现的完美渐变弹出层效果代码
2010/04/02 Javascript
jQuery中调用WebService方法小结
2011/03/28 Javascript
通过上下左右键和回车键切换光标实现代码
2013/03/08 Javascript
jQuery实现预加载图片的方法
2015/03/17 Javascript
JS通过ajax动态读取xml文件内容的方法
2015/03/24 Javascript
Javascript变量的作用域和作用域链详解
2015/04/02 Javascript
浅谈JSON.parse()和JSON.stringify()
2015/07/14 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
2015/11/06 Javascript
jQuery获取当前点击的对象元素(实现代码)
2016/05/19 Javascript
jQuery事件详解
2017/02/23 Javascript
关于页面刷新vuex数据消失问题解决方案
2017/07/03 Javascript
jquery tmpl模板(实例讲解)
2017/09/02 jQuery
js动态添加表格逐行添加、删除、遍历取值的实例代码
2018/01/25 Javascript
js实现页面图片消除效果
2020/03/24 Javascript
Python实现把回车符\r\n转换成\n
2015/04/23 Python
Python3使用PyQt5制作简单的画板/手写板实例
2017/10/19 Python
python学习基础之循环import及import过程
2018/04/22 Python
Python批处理删除和重命名文件夹的实例
2018/07/11 Python
Python实现的简单计算器功能详解
2018/08/25 Python
Python判断一个文件夹内哪些文件是图片的实例
2018/12/07 Python
Pycharm 2020.1 版配置优化的详细教程
2020/08/07 Python
YOOX美国官方网站:全球著名的多品牌时尚网络概念店
2016/09/11 全球购物
小狗电器官方商城:中国高端吸尘器品牌
2017/03/29 全球购物
戴森西班牙官网:Dyson西班牙
2020/02/04 全球购物
校园安全广播稿范文
2014/09/25 职场文书
2014年高中生自我评价范文
2014/09/26 职场文书
发言稿之优秀教师篇
2019/09/26 职场文书
linux下导入、导出mysql数据库命令的实现方法
2021/05/26 MySQL