可视区尺寸
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  窗口大小改变事件













												


											
JS中级 - 03：文档宽高及窗口事件（选）的更多相关文章
	

    
								
  1. BOM，文档宽高及窗口事件小析
		
    (一)BOM:Browser Object Model(浏览器对象模型)页面上所有的变量都是window的属性 一.方法:1. open(,)打开一个新窗口(页面)一参为页面地址url,二参为打开方式 ...
    
		
    2. 
						
  2. JavaScript -获取屏窗与视窗、文档宽高
		
    实例:1920*1080的电脑屏幕 1.获取窗口中的文档显示区域宽高 clientw = window.innerWidth; //1920(包含滚动条) clienth = window.inner ...
    
		
    3. 
						
  3. js实现字体和容器宽高随窗口改变
		
    用于字体大小和容器的宽高字体和宽高设为rem就可以了 var html = document.documentElement; function fonts(){ var hW = html.offs ...
    
		
    4. 
						
  4. Sencha Cmd 6 和 Ext JS 6 指南文档（部分官方文档中文翻译）
		
    近期组织了几个程序员网友,正在翻译一部分官方的Sencha Cmd 6 和 Ext JS 6 指南文档. 眼下还没翻译完,大家能够先看看 Sencha Cmd 6 和 Ext JS 6 指南文档  ( ...
    
		
    5. 
						
  5. js介绍，js三种引入方式，js选择器，js四种调试方式，js操作页面文档DOM（修改文本，修改css样式,修改属性）
		
    js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...
    
		
    6. 
						
  6. js不需要知道图片宽高的懒加载方法（经过实际测试，不加宽高仍然是无法正常加载的，设置height:auto,height:100%，仍然显示高度为0）
		
    js不需要知道图片宽高的懒加载方法 懒加载是如何实现的? - 简书https://www.jianshu.com/p/e86c61468285找到一个不需要知道图片宽高的懒加载方法了(经过实际测试,不 ...
    
		
    7. 
						
  7. jQuery全屏滚动插件fullPage.js中文帮助文档API
		
    jQuery全屏滚动插件fullPage.js中文帮助文档API   发现了一个fullPage.js插件,于是百度了一下,还就是这个插件的作用,其实有很多网站都做了全屏滚动的特效,效果也很好看,今天 ...
    
		
    8. 
						
  8. Ext JS 6学习文档-第8章-主题和响应式设计
		
    Ext JS 6学习文档-第8章-主题和响应式设计 主题和响应式设计 本章重点在 ExtJS 应用的主题和响应式设计.主要有以下几点内容: SASS 介绍和入门 主题 响应式设计 SASS 介绍和入门 ...
    
		
    9. 
						
  9. Ext JS 6学习文档-第7章-图表
		
    Ext JS 6学习文档-第7章-图表 使用图表 本章中将探索在 ExtJS 中使用不同类型的图表并使用一个名为费用分析的示例项目结束本章所学.以下是将要所学的内容: 图表类型 条形图 和 柱形图 图 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. I/O复用机制概述
			
    导读 /O多路复用技术通过把多个I/O的阻塞复用到同一个select的阻塞上,从而使得系统在单线程的情况下可以同时处理多个客户端请求.与传统的多线程/多进程模型比,I/O多路复用的最大优势是系统开销小 ...
    
			
    2. 
						
  2. iOS跳转到另一个程序
			
    我这里只是写了部分东西,如果想看更加详细的,请点击原文链接. 原文链接:http://blog.csdn.net/likendsl/article/details/7553605   原则上iOS的沙 ...
    
			
    3. 
						
  3. centos7 关闭firewall安装iptables并配置
			
    一.配置防火墙,开启80端口.3306端口 CentOS 7.0默认使用的是firewall作为防火墙,这里改为iptables防火墙. 1.关闭firewall: systemctl stop fi ...
    
			
    4. 
						
  4. div里包含img底部必定多出空白的解决办法
			
    研究了很久,自己写了js代码都解决不了.最后还是靠万能的网友解决了这一问题! 问题:adding.margin.border都设为0,无效.怎么样都多出3px. 解决方案: 1.设置div{ font ...
    
			
    5. 
						
  5. cacti错误
			
    cacti 错误:CMDPHP: Poller[0] ERROR 解决方案: 找到错误表 desc 表名: 修复此表 mysqlcheck -A -o -r -p -u用户名
    
			
    6. 
						
  6. PHP 知识点链接
			
    PHP 1.PHP中的危险函数全解析                 http://www.php100.com/html/webkaifa/PHP/PHPyingyong/2009/0216/333 ...
    
			
    7. 
						
  7. Redis Sentinel机制与用法（一）
			
    Sentinel spring 集群配置: 概述 Redis-Sentinel是Redis官方推荐的高可用性(HA)解决方案,当用Redis做Master-slave的高可用方案时,假如master宕 ...
    
			
    8. 
						
  8. java微信接口之——获取access_token
			
    本文转自http://www.cnblogs.com/always-online/category/598553.html 一.微信获取access_token接口简介 1.请求:该请求是GET方式请 ...
    
			
    9. 
						
  9. iOS 真机文件系统区分大小写，而模拟器可能不区分
			
    模拟器区不区分大小写要看mac os是不是区分大小写,而这个和你的文件系统有关,如下图 如果你使用了默认的格式,就区分不了大小写了! 看来以后还是应该使用第二种格式啊!
    
			
    10. 
						
  10. lftp使用普通ftp模式登录
			
    set ftp:use-feat no set ftp:passive-mode yes set ftp:ssl-protect-data no set ssl:verify-certificate  ...
    
			
    11.