js获取Html元素的实际宽度高度的方法
更新时间：2016年05月19日 10:00:40 投稿：jingxian
下面小编就为大家带来一篇js获取Html元素的实际宽度高度的方法。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
第一种情况就是宽高都写在样式表里，就比如#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元素的实际宽度高度的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了JS实现的不规则TAB选项卡效果代码,基于鼠标事件动态设置页面元素样式实现该效果,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
这篇文章主要给大家介绍了关于ES6中类（Class）的相关资料，文中介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
这篇文章主要介绍了微信小程序五子棋游戏的悔棋实现方法,结合实例形式分析了微信小程序中悔棋的原理与相关实现技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下2019-02-02
本文主要是给大家带来一个时间轴的组件开发教程，其主要功能就是可以拖动时间轴来定位当前时间，可以通过鼠标滚轮来修改当前时间分辨率，需要的可以参考一下2022-10-10
这篇文章主要介绍了javaScript实现滚动新闻的方法,涉及javascript实现页面滚动的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-07-07
本文给大家分享的是类似QQ窗口的抖动效果,只是觉得好玩，没什么技术含量，推荐给大家，有需要的小伙伴可以参考下。2015-05-05
javascript中使用css需要注意的地方小结，注意保留字问题。2010-09-09
这篇文章主要介绍了js实现的tab标签切换效果，功能非常简单，实现了点击切换的效果，推荐给大家，有需要的小伙伴可以参考下。2015-09-09
这篇文章介绍了JS异步的执行顺序，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
引入autocomplete组件时JS报未结束字符串常量错误
在引入jQuery的autocomplete组件时，遇到js报未结束字符串常量错误，原因及解决方法如下，大家可以参考下2014-03-03
最新评论