js原生获取html的高度,如何获取HTML的高度?

我把结论写上面

总的来说 设置了

*{

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();

var a=0;

setInterval(function(){

a= document.body.scrollHeight

console.log(a);

},400)

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

var a=0;

setInterval(function(){

a= document.body.offsetHeight //也可以是clientHeight

console.log(a);

},400)

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

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

*{

margin:0;

padding:0;

}

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

我把结论写上面 总的来说 设置了 *{ 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(); var a=0; setInterval(function(){ a= document.body.scrollHeight console.log(a); },400) 我是写了一个定时器 每400毫秒查一下数据 发现这里获取到的是窗口大小 var a=0; setInterval(function(){ a= document.body.offsetHeight //也可以是clientHeight console.log(a); },400) 你可以看到我的html文档中只有一个div高度为21 但是 我发现 上面的offsetHeight //也可以是clientHeigh获取的都是body大小 当你在没有设置 *{ margin:0; padding:0; } 设置后 html就跟body等高 用上面方法就可以
经验分享 程序员 微信小程序 职场和发展