关于页面高度的一些取值记录

最新推荐文章于 2024-10-04 22:04:56 发布

tutuzhu

最新推荐文章于 2024-10-04 22:04:56 发布

阅读量106

点赞数

分类专栏： js 文章标签： html

本文链接：https://blog.csdn.net/tutuzhu/article/details/84228412

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
* { margin:0px; padding:0px; }
</style>
</head>
<body>
<div style=" height:200px; ">sfdsadf</div>
</body>
</html>
在body标签声明标签都齐全的情况下
取的body高度：
document.body.offsetHeight、document.body.clientHeight 的取值是一样的都是取 body的高度 alert得到200px
取得可视窗口高度：
ie： document.getElementsByTagName("html")[0].offsetHeight;
Firefox、Chrome、Opera ： window.innerHeight;
var windowHeight=document.all ? document.getElementsByTagName("html")[0].offsetHeight : window.innerHeight;
电脑屏幕分辨率高
window.screen.height

var Viewport={
top : function(){
return window.pageYOffset
|| document.documentElement && document.documentElement.scrollTop
|| document.body.scrollTop;
},
height : function(){
return window.innerHeight
|| document.documentElement && document.documentElement.clientHeight
|| document.body.clientHeight;
},
left : function(){
return window.pageXOffset
|| document.documentElement && document.documentElement.scrollLeft
|| document.body.scrollLeft;
},
width : function(){
return window.innerWidth
|| document.documentElement && document.documentElement.clientWidth
|| document.body.clientWidth;
},
right : function(){
return Viewport.left() + Viewport.width();
},
bottom : function(){
return Viewport.top() + Viewport.height();
}
};

//alert(mn.offsetHeight);//260 元素的高度+border
//alert(mn.clientHeight);//240 元素的高度
//alert(mn.offsetWidth);//260 元素的宽度+border
//alert(mn.clientWidth);//240 元素的宽度

//alert(document.body.clientHeight); //等于页面内容的总height 260 如果元素都绝对定位为0 （如果5个元素 1100）
//alert(document.body.offsetHeight); //等于页面内容的总height+窗口的边线border 260 （如果5个元素 1100）
//alert(document.body.clientWidth); 窗口的可视宽度随窗口的缩放变动
//alert(document.body.offsetWidth); 窗口的可视宽度+边线border 随窗口的缩放变动

//alert(mn.offsetTop);// 元素的margintop+以上元素的总高度值（总的可视高不管里面padding或margin)
//alert(mn.offsetLeft);// 元素的marginleft+以左边元素的总高度值（总的可视高不管里面paddin