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 相关文章推荐
$()JS小技巧
Jul 21 Javascript
javascript arguments 传递给函数的隐含参数
Aug 21 Javascript
jQuery checkbox全选/取消全选实现代码
Nov 14 Javascript
基于jquery的模态div层弹出效果
Aug 21 Javascript
JavaScript中的函数的两种定义方式和函数变量赋值
May 12 Javascript
JS实现选择TextArea内文本的方法
Aug 03 Javascript
JS取模、取商及取整运算方法示例
Oct 13 Javascript
微信小程序 二维码canvas绘制实例详解
Jan 06 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
Mar 15 Javascript
Bootstrap fileinput文件上传预览插件使用详解
May 16 Javascript
vue环境搭建简单教程
Nov 07 Javascript
ECharts地图绘制和钻取简易接口详解
Jul 12 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中each与list用法分析
2016/01/08 PHP
深入解析PHP的Yii框架中的event事件机制
2016/03/17 PHP
PHP中用mysqli面向对象打开连接关闭mysql数据库的方法
2016/11/05 PHP
PHP实现支付宝即时到账功能
2016/12/21 PHP
PHP与Web页面交互操作实例分析
2020/06/02 PHP
jQuery prev ~ siblings选择器使用介绍
2013/08/09 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
2014/12/12 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
2015/04/07 Javascript
js同源策略详解
2015/05/21 Javascript
基于javascript实现页面加载loading效果
2020/09/15 Javascript
jQuery如何跳转到另一个网页 就这么简单
2016/12/28 Javascript
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
2017/05/13 jQuery
phantomjs导出html到pdf的方法总结
2017/10/19 Javascript
原生js+cookie实现购物车功能的方法分析
2017/12/21 Javascript
ES6的异步终极解决方案分享
2019/07/11 Javascript
vue 解决数组赋值无法渲染在页面的问题
2019/10/28 Javascript
[31:47]夜魇凡尔赛茶话会 第三期01:选手知多少
2021/03/11 DOTA
Python中尝试多线程编程的一个简明例子
2015/04/07 Python
Python cx_freeze打包工具处理问题思路及解决办法
2016/02/13 Python
Python+Selenium+PIL+Tesseract自动识别验证码进行一键登录
2017/09/20 Python
轻松实现TensorFlow微信跳一跳的AI
2018/01/05 Python
Python3利用Dlib实现摄像头实时人脸检测和平铺显示示例
2019/02/21 Python
Pyqt QImage 与 np array 转换方法
2019/06/27 Python
Django 请求Request的具体使用方法
2019/11/11 Python
Python对称的二叉树多种思路实现方法
2020/02/28 Python
20行Python代码实现视频字符化功能
2020/04/13 Python
opencv 图像加法与图像融合的实现代码
2020/07/08 Python
css3实现简单的白云飘动背景特效
2020/10/28 HTML / CSS
Marc Jacobs官方网站:美国奢侈品牌
2017/08/29 全球购物
Europcar意大利:汽车租赁
2019/07/07 全球购物
初中地理教学反思
2014/01/11 职场文书
读书演讲主持词
2014/03/18 职场文书
关于读书的演讲稿300字
2014/08/27 职场文书
护士工作失误检讨书
2014/09/14 职场文书
禁毒主题班会教案
2015/08/14 职场文书
JavaScript选择器函数querySelector和querySelectorAll
2021/11/27 Javascript