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 相关文章推荐
短信提示使用 特效
Jan 19 Javascript
[原创]后缀就扩展名为js的文件是什么文件
Dec 06 Javascript
json对象转字符串如何实现
Dec 02 Javascript
js的alert样式如何更改如背景颜色
Jan 22 Javascript
使用js显示当前时间示例
Mar 02 Javascript
jQuery中:last选择器用法实例
Dec 30 Javascript
浅谈Sizzle的“编译原理”
Apr 14 Javascript
js实现圆盘记速表
Aug 03 Javascript
Web Uploader文件上传插件使用详解
May 10 Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
Sep 04 Javascript
vue+axios实现登录拦截的实例代码
May 22 Javascript
JS简单实现数组去重的方法分析
Oct 14 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中的加密功能
2006/10/09 PHP
thinkphp浏览历史功能实现方法
2014/10/29 PHP
Yii框架在页面输出执行sql语句以方便调试的实现方法
2014/12/24 PHP
PHP函数按引用传递参数及函数可选参数用法示例
2018/06/04 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
5 cool javascript apps
2007/03/24 Javascript
基于jquery的文本框与autocomplete结合使用(asp.net+json)
2012/05/30 Javascript
jquery ready函数、css函数及text()使用示例
2013/09/27 Javascript
javascript中style.left和offsetLeft的用法说明
2014/03/07 Javascript
js实现上传图片预览的方法
2015/02/09 Javascript
微信支付如何实现内置浏览器的H5页面支付
2015/09/25 Javascript
jQuery时间日期三级联动(推荐)
2016/11/27 Javascript
基于jQuery对象和DOM对象和字符串之间的转化实例
2017/08/08 jQuery
jQuery实现所有验证通过方可提交的表单验证
2017/11/21 jQuery
js实现unicode码字符串与utf8字节数据互转详解
2019/03/21 Javascript
JS实现倒序输出的几种常用方法示例
2019/04/13 Javascript
vue框架制作购物车小球动画效果实例代码
2019/09/26 Javascript
微信小程序转化为uni-app项目的方法示例
2020/05/22 Javascript
[01:20:06]TNC vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[56:29]Secret vs Optic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[46:21]Liquid vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
Python编写检测数据库SA用户的方法
2014/07/11 Python
Python标准库之循环器(itertools)介绍
2014/11/25 Python
python 中的int()函数怎么用
2017/10/17 Python
Python常见字典内建函数用法示例
2018/05/14 Python
python验证码识别教程之利用滴水算法分割图片
2018/06/05 Python
Python常用特殊方法实例总结
2019/03/22 Python
wxPython实现画图板
2020/08/27 Python
Anaconda3+tensorflow2.0.0+PyCharm安装与环境搭建(图文)
2020/02/18 Python
Python-openpyxl表格读取写入的案例详解
2020/11/02 Python
酒店中秋节活动方案
2014/01/31 职场文书
机关单位人员学雷锋心得体会
2014/03/10 职场文书
房产委托公证书样本
2014/04/04 职场文书
自查自纠整改报告
2014/11/06 职场文书
教你怎么用Python监控愉客行车程
2021/04/29 Python
【2·13】一图读懂中国无线电发展
2022/02/18 无线电