可视区尺寸
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. Laravel5.1-Eloquent ORM：起步
			
    概述 有很多朋友问,MCV的M是在哪里介绍的,这里就是介绍M的地方了.Laravel有一个强大的数据库ORM Eloquent,它的原理是每张数据表对应一个Model,对Model的操作就对应数据库的 ...
    
			
    2. 
						
  2. mysql日期加减<转>
			
    1. MySQL 为日期增加一个时间间隔:date_add() set @dt = now(); select date_add(@dt, interval 1 day); - 加1天 select  ...
    
			
    3. 
						
  3. .oi 小游戏
			
    http://agar.io/ http://diep.io/ http://slither.io/ http://splix.io/ http://wilds.io/ http://kingz.io ...
    
			
    4. 
						
  4. 可复用View的PagerAdapter
			
    用PagerAdapter的时候会反复调用instantiateItem和destroyItem来创建和销毁View,没有复用性.这里封装了一个可复用View的PagerAdapter,给实现类留下的 ...
    
			
    5. 
						
  5. wamp2.5版本64位403forbidden问题
			
    使用最新版wamp集成环境的时候,在主机上可以访问localhost,外网访问时遇到了403错误.如下: 这是由于新版wamp默认配置比较严格,出于安全和性能的考虑,这么做是可以理解的. 解决方法为: ...
    
			
    6. 
						
  6. Python判断当前用户是否是root
			
    import osif os.geteuid() != 0:print "This program must be run as root. Aborting."sys.exit( ...
    
			
    7. 
						
  7. Linux Ruijie登录命令
			
    cd rjsupplicant chmod +x rjsupplicant.sh sudo ./rjsupplicant.sh -u 1550590×××× -p ××××× -d 1
    
			
    8. 
						
  8. Weiphp随笔，百度天气API接口
			
    新建插件名必须大写 http://api.map.baidu.com/telematics/v3/weather?location=%E5%8C%97%E4%BA%AC&output=json ...
    
			
    9. 
						
  9. ndk学习5: ndk中使用c++
			
    默认情况下ndk不支持标准C++库,异常, rtti等   在ndk文档有关于C++ support的详细介绍   一. 使用C++标准库 介绍: 默认是使用最小额度的C++运行时库, 在Applic ...
    
			
    10. 
						
  10. JSON代码格式化 进行查询筛选
			
    JSON是前端编程经常用到的格式,对于PHP或者Python,解析JSON都不是什么大事,尤其是PHP的json_encode和json_decode,干的相当的漂亮.Linux下也有处理处理JSON ...
    
			
    11.