Javascript获取div真实高度

曾经终败给现在 2023-06-01 12:45 2阅读 0赞

第一种情况就是宽高都写在样式表里，就比如\#div1\{width:120px;\}。这中情况通过\#div1.style.width拿不到宽度，而通过\#div1.offsetWidth才可以获取到宽度。

第二种情况就是宽和高是写在行内中，比如style="width:120px;"，这中情况通过上述2个方法都能拿到宽度。（什么是行内，就是直接在html标签上写样式）

小结，因为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; //宽度

原文：[http://www.cnblogs.com/zhwl/p/3858682.html][http_www.cnblogs.com_zhwl_p_3858682.html]

实际测试过程中，发现上面获取真实高度是有问题，其实无论是设置在样式表还是在行内设置，都会获取到你设置的值，如果要获取真实高度，有如下思路，以行内样式来说：

<div class="article__content article_content" style="height: 703px;">
        <div>
        </div>
    </div>
    获取真实高度：
    alert(parseInt($('.article__content div').get(0).offsetHeight));

获取时只要在这个样式里面的div大小，这个就是真实高度。

这里还附带其它的获取高度方法

alert($(window).height()); //浏览器当前窗口可视区域高度
    alert($(document).height()); //浏览器当前窗口文档的高度
    alert($(document.body).height());//浏览器当前窗口文档body的高度
    alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin
    alert($(window).width()); //浏览器当前窗口可视区域宽度
    alert($(document).width());//浏览器当前窗口文档对象宽度
    alert($(document.body).width());//浏览器当前窗口文档body的高度
    alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin

转载于:https://www.cnblogs.com/EasonJim/p/6229517.html

[http_www.cnblogs.com_zhwl_p_3858682.html]: http://www.cnblogs.com/zhwl/p/3858682.html