下面小编就为大家带来一篇 js 获取 html 元素的实际宽度高度的方法。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
第一种情况就是宽高都写在样式表里,就比如 #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 元素的实际宽度高度的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持 phperz。
来源: http://www.phperz.com/article/17/0223/265643.html