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 相关文章推荐
jQuery代码优化之基本事件
Nov 01 Javascript
IE下使用cloneNode注意事项分享
Nov 22 Javascript
js借助ActiveXObject实现创建文件
Sep 29 Javascript
js加载读取内容及显示与隐藏div示例
Feb 13 Javascript
JS获得浏览器版本和操作系统版本的例子
May 13 Javascript
js实现文本上下来回滚动
Feb 03 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
Mar 13 Javascript
Element UI 自定义正则表达式验证方法
Sep 04 Javascript
总结javascript三元运算符知识点
Sep 28 Javascript
详解vue组件中使用路由方法
Feb 12 Javascript
angularjs请求数据的方法示例
Aug 06 Javascript
js实现漂亮的星空背景
Nov 01 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
ecshop 订单确认中显示省市地址信息的方法
2010/03/15 PHP
Trying to clone an uncloneable object of class Imagic的解决方法
2012/01/11 PHP
通过php快速统计某个数据库中每张表的数据量
2012/09/04 PHP
PHP微信开发之模板消息回复
2016/06/24 PHP
修改发贴的编辑功能
2007/03/07 Javascript
基于jquery的一个图片hover的插件
2010/04/24 Javascript
javascript 传统事件模型构造的事件监听器实现代码
2010/05/31 Javascript
jQuery手机拨号界面特效代码分享
2015/08/27 Javascript
jquery div模态窗口的简单实例
2016/05/28 Javascript
jQuery实现的checkbox级联选择下拉菜单效果示例
2016/12/26 Javascript
socket.io学习教程之基本应用(二)
2017/04/29 Javascript
Vue组件通信之Bus的具体使用
2017/12/28 Javascript
使用Vue写一个datepicker的示例
2018/01/27 Javascript
详解js的作用域、预解析机制
2018/02/05 Javascript
记录一篇关于redux-saga的基本使用过程
2018/08/18 Javascript
vue组件间的参数传递实例详解
2019/04/26 Javascript
vue监听用户输入和点击功能
2019/09/27 Javascript
微信小程序网络请求实现过程解析
2019/11/06 Javascript
浅析vue-router中params和query的区别
2019/12/24 Javascript
Vue父组件向子组件传值以及data和props的区别详解
2020/03/02 Javascript
Element Collapse 折叠面板的使用方法
2020/07/26 Javascript
vue $router和$route的区别详解
2020/12/02 Vue.js
Python Web框架Flask中使用新浪SAE云存储实例
2015/02/08 Python
python Django模板的使用方法
2016/01/14 Python
新手如何快速入门Python(菜鸟必看篇)
2017/06/10 Python
Python找出最小的K个数实例代码
2018/01/04 Python
python实现图片筛选程序
2018/10/24 Python
pycharm下配置pyqt5的教程(anaconda虚拟环境下+tensorflow)
2020/03/25 Python
CSS3中currentColor关键字的妙用
2016/02/27 HTML / CSS
利用html5 canvas动态画饼状图的示例代码
2018/04/02 HTML / CSS
英国护肤品购物网站:Beauty Expert
2016/08/19 全球购物
自我鉴定范文200字
2013/10/02 职场文书
2015年五一劳动节慰问信
2015/03/23 职场文书
大学生受助感言
2015/08/01 职场文书
2016年教师节感恩寄语
2015/12/04 职场文书
Selenium浏览器自动化如何上传文件
2022/04/06 Python