JS中级 - 03：文档宽高及窗口事件（选）

可视区尺寸
document.documentElement.clientWidth
document.documentElement.clientHeight
滚动距离
document.body.scrollTop/scrollLeft
document.documentElement.scrollTop/scrollLeft
内容高度
document.body.scrollHeight
文档高度
document.documentElement.offsetHeight
document.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  窗口大小改变事件


posted @ 2016-10-23 23:57  【唐】三三  阅读(340)  评论(0)    收藏  举报