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中数组Array的一些常用方法总结
Aug 12 Javascript
JavaScript静态类型检查工具FLOW简介
Jan 06 Javascript
director.js实现前端路由使用实例
Feb 03 Javascript
JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库(在yii框架中操作)的代码分享
Nov 01 Javascript
利用JS实现页面删除并重新排序功能
Dec 09 Javascript
javascript设计模式之模块模式学习笔记
Feb 15 Javascript
3种vue组件的书写形式
Nov 29 Javascript
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
JS实现对json对象排序并删除id相同项功能示例
Apr 18 Javascript
总结4个方面优化Vue项目
Feb 11 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
Dec 09 Javascript
javascript实现蒙版与禁止页面滚动
Jan 11 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遍历二维数组的代码
2011/04/22 PHP
php调用MySQL存储过程的方法集合(推荐)
2013/07/03 PHP
PHP从FLV文件获取视频预览图的方法
2015/03/12 PHP
php编程每天必学之表单验证
2016/03/01 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
php生成word并下载代码实例
2019/03/15 PHP
制作特殊字的脚本
2006/06/26 Javascript
input、button的不同type值在ajax提交表单时导致的陷阱
2009/02/24 Javascript
用dtree实现树形菜单 dtree使用说明
2011/10/17 Javascript
如何使用jQuery Draggable和Droppable实现拖拽功能
2013/07/05 Javascript
js冒泡法和数组转换成字符串示例代码
2013/08/14 Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
2015/05/19 Javascript
纯JavaScript代码实现移动设备绘图解锁
2015/10/16 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
2016/05/17 Javascript
plupload+artdialog实现多平台上传文件
2016/07/19 Javascript
AngularJS表达式讲解及示例代码
2016/08/16 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
2017/02/19 Javascript
vue中子组件向父组件传递数据的实例代码(实现加减功能)
2018/04/20 Javascript
基于nodejs的雪碧图制作工具的示例代码
2018/11/05 NodeJs
ES6 Object.assign()的用法及其使用
2020/01/18 Javascript
利用webpack理解CommonJS和ES Modules的差异区别
2020/06/16 Javascript
[04:45]DOTA2-DPC中国联赛正赛 iG vs LBZS 赛后选手采访
2021/03/11 DOTA
Python整型运算之布尔型、标准整型、长整型操作示例
2017/07/21 Python
Python从使用线程到使用async/await的深入讲解
2018/09/16 Python
对Python捕获控制台输出流的方法详解
2019/01/07 Python
django中ORM模型常用的字段的使用方法
2019/03/05 Python
在python plt图表中文字大小调节的方法
2019/07/08 Python
python多线程和多进程关系详解
2020/12/14 Python
德国亚马逊官方网站:Amazon.de
2020/11/15 全球购物
干部作风整顿自我剖析材料和整改措施
2014/09/18 职场文书
年中了,该如何写好个人述职报告?
2019/07/02 职场文书
Python数据类型最全知识总结
2021/05/31 Python
如何利用Python实现一个论文降重工具
2021/07/09 Python
JavaScript 定时器详情
2021/11/11 Javascript
python中的sys模块和os模块
2022/03/20 Python