[javascript] javascript计算荧屏中的各种高度
日期：2014-05-16 浏览次数：20415 次
[javascript] javascript计算屏幕中的各种高度！
结合前两天对scrollTop与offset的理解，终于对于浏览器中各种高度作出了一个总结。
这几天对于js控制元素在浏览器端的高度问题，
有点麻烦，于是决定深入学习一番，经过一番努力测试，得如下结果：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<title></title>
</head>
<body>
<div style="height:800px;width:500px;border:10px solid red;" id="div1">
<div style="margin-top:100px;height:800px;width:500px;border:10px solid blue;" id="div2">
<div style="margin-top:100px;height:100px;width:500px;border:10px solid green;position:fixed;bottom:100px;" id="div3">
<div ></div>
</div>
</div>
<script type="text/javascript">
$(window).scroll(function(){
console.log("window-height:" + $(window).height());
console.log("div1-height:" + $("#div1").height());
console.log("div2-height:" + $("#div2").height());
console.log("div3-height:" + $("#div3").height());
console.log("div1到document顶部距离:div1-offset-height:" + $("#div1").offset().top);
console.log("div2到document顶部距离:div2-offset-height:" + $("#div2").offset().top);
console.log("div3到document顶部距离:div3-offset-height:" + $("#div3").offset().top);
console.log("document被压缩的距:document-scrollTop:" + $(document).scrollTop());
console.log("div3距离浏览器边框底部高度:" + ($(window).height() - $("#div3").height() - ($("#div3").offset().top- $(document).scrollTop())));
console.log("div3距离浏览器边框底部真实高度(不包括div的上下border宽度):" + ($(window).height() - $("#div3").outerHeight() - ($("#div3").offset().top- $(document).scrollTop())));
});
</script>
</body>
</html>结合前两天对scrollTop与offset的理解，终于对于浏览器中各种高度作出了一个总结。
哈哈，妈妈再也不用担心浏览器的告诉问题了。
偶有所得，以记录之，谨防忘记。
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
