標籤：port inline ack offset family ext add font import
可視區尺寸document.documentElement.clientWidthdocument.documentElement.clientHeight滾動距離document.body.scrollTop/scrollLeftdocument.documentElement.scrollTop/scrollLeft內容高度document.body.scrollHeight文檔高度document.documentElement.offsetHeightdocument.body.offsetHeight<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>視窗尺寸</title>
<style>
body{
margin: 0px;
padding: 0px;
}
</style>
<script type="text/javascript">
window.onload =function(){
/**
*可視區的尺寸
*document.documentElement.clientWidth
*document.documentElement.clientHeight
*/
alert(document.documentElement.clientWidth+","+document.documentElement.clientHeight);
/**
* 捲軸滾動距離
* document.documentElement.scrollTop[srollLeft]
* document.body.scrollTop[srollLeft] //chrome瀏覽器只認識body
*/
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
//alert(scrollTop);
/**
* 內容高度
* ScrollHeight:返回整個元素的高度（包括帶捲軸的隱形地方）
* oDiv.ScrollHeight(Width)
*/
//alert(div1.scrollHeight) //210
/**
* 文檔高度
* offsetHeight
*/
//alert(document.documentElement.offsetHeight||document.body.offsetHeight); //2000
}
</script>
</head>
<body>
<div style="2000px">
<div id="div1" style="width:100px;height:100px;border:1px solid red;
padding:10px;margin:10px; ">
<div id="div2" style="width:100px;height:200px;background:blue"></div>
</div>
</div>
</body>
</html>window 對象常用事件onscroll 滾動事件onresize 視窗大小改變事件
JS中級 - 03：文檔寬高及視窗事件（選）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
