javascript - 如何获取HTML的高度？

Question

我想获得HTML的高度，但 我在CSS写的是 height:100%;在chrome中测量这个值是固定的1141
*1419 高度一直是1419，为什么我用document.body.clientHeight 和var htmlHight = document.body.scrollHeight ;得到的都 不是这个结果，应该用什么（DOM,BOM）获得 HTML 高度？

showmain中的内容使用了 float:left , 所以document.body.clientHeight 只能显示那只是BODY的高度634，在html的1419却包含了showmain的高度

我认为 凡是 带有.body.的都可以不考虑，因为，既然要的是html这个元素的高度（或者说 整张页面的高度），.dody.就可以先排除了， 除非设计的时候没想好。。。

Answer 1

我把结论写上面
总的来说 设置了

*{
margin:0;
padding:0;
}

后就可以用clientHeight、offsetHeight来获取html了
没有设置的时候：

设置后的body跟html一样height

function getInfo() 
{ 
var s = ""; 
s += " 网页可见区域宽："+ document.body.clientWidth; 
s += " 网页可见区域高："+ document.body.clientHeight; //body
s += " 网页可见区域宽："+ document.body.offsetWidth + " (包括边线和滚动条的宽)"; 
s += " 网页可见区域高："+ document.body.offsetHeight + " (包括边线的宽)"; 
s += " 网页正文全文宽："+ document.body.scrollWidth; 
s += " 网页正文全文高："+ document.body.scrollHeight; //窗口
s += " 网页被卷去的高(ff)："+ document.body.scrollTop; 
s += " 网页被卷去的高(ie)："+ document.documentElement.scrollTop; 
s += " 网页被卷去的左："+ document.body.scrollLeft; 
s += " 网页正文部分上："+ window.screenTop; 
s += " 网页正文部分左："+ window.screenLeft; 
s += " 屏幕分辨率的高："+ window.screen.height; 
s += " 屏幕分辨率的宽："+ window.screen.width; 
s += " 屏幕可用工作区高度："+ window.screen.availHeight; 
s += " 屏幕可用工作区宽度："+ window.screen.availWidth; 
s += " 你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色"; 
s += " 你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸"; 
//alert (s); 
} 
getInfo(); 

<script type="text/javascript">
var a=0;
setInterval(function(){
    a= document.body.scrollHeight  
       console.log(a);
},400)

</script>

我是写了一个定时器 每400毫秒查一下数据 发现这里获取到的是窗口大小
效果图：

<script type="text/javascript">
var a=0;
setInterval(function(){
    a= document.body.offsetHeight   //也可以是clientHeight
    console.log(a);
},400)

</script>

效果图：

你可以看到我的html文档中只有一个p高度为21

但是 我发现 上面的offsetHeight //也可以是clientHeigh获取的都是body大小 当你在没有设置

*{
margin:0;
padding:0;
}

设置后 html就跟body等高 用上面方法就可以

Answer 2

貌似js获取页面元素的样式确实有点坑，你试试这样子看看：
var attrStyle = function(elem, attr) { //获取样式

                if(elem.attr) {
                    return elem.style[attr];
                } else if(elem.currentStyle) {
                    return elem.currentStyle[attr];
                } else if(document.defaultView && document.defaultView.getComputedStyle) {
                    attr = attr.replace(/([A-Z])/g, '-$1').toLowerCase();
                    return document.defaultView.getComputedStyle(elem, null).getPropertyValue(attr);
                } else {
                    return null;
                }
            }
            
            attrStyle(body, "height")；试试看

Answer 3

你想知道还是获取?想知道的话F12,点下带框框的小箭头鼠标已过去就能看到长宽.
如果想获取高度就: document.getElementById("id").offsetHeight;

Answer 4

var a = document.body.offfsetTop;
alert(a);

Answer 5

视口宽高，
document.documentElement.clientHeight
你试试这个。
前提
html{
width:100%;
height:100%;
}
body无样式要求。
而且一般写网页都会写
html,body{
width:100%;
height:100%;
}
所以可以这么用。