可视区尺寸
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. python 中的unicode详解
			
    通过例子来看问题是比较容易懂的. 首先来看,下面这个是我新建的一个txt文件,名字叫做ivan_utf8.txt,然后里面随便编辑了一些东西. 然后来用控制台打开这个文件,同样也是截图: 这里就是简单 ...
    
			
    2. 
						
  2. BestCoder Round #61 1002 Game
			
    Problem Description XY is playing a game:there are N pillar in a row,which numbered from 1 to n.Each ...
    
			
    3. 
						
  3. SNMP报文抓取与分析(一)
			
    SNMP报文抓取与分析(一) 1.抓取SNMP报文 SNMP报文的形式大致如下图所示 我们这里使用netcat这个工具来抓取snmp的PDU(协议数据单元).(因为我们并不需要前面的IP和UDP首部) ...
    
			
    4. 
						
  4. Service
			
      一.什么是Service Service在后台运行,不与用户进行交互.在默认情况下,Service运行在应用程序进程的主线程中,如果需要在Service中处理一些网络连接等耗时的操作,那么应该将这 ...
    
			
    5. 
						
  5. 【Java MyBatis Generator】使用generator自动生成Dao，Mapping和实体文件
			
    具体请参照: http://blog.csdn.net/fengshizty/article/details/43086833 按照上面博客地址,下载Generator的依赖包: 如下是我的配置文件: ...
    
			
    6. 
						
  6. C#的contextMenuStrip右键没反应的可能原因
			
    contextMenuStrip设置右键菜单,但是新手常常忽略一个问题,我要遇到了,即没有设置contextMenuStrip所在控件的contextMenuStrip属性,需要把contextMen ...
    
			
    7. 
						
  7. 通过代理连接go01ge
			
     日本:https://pac.mcplay.cn/jp.pac台湾:https://pac.mcplay.cn/tw.pac如果想上Google可以试试简单的方法,在ie的代理自动配置脚本设置这个p ...
    
			
    8. 
						
  8. android一句话搞定图片加载
			
    http://square.github.io/picasso/ Picasso.with(context).load("http://i.imgur.com/DvpvklR.png&quo ...
    
			
    9. 
						
  9. ios swift generator 文章推荐
			
    https://medium.com/swift-programming/sequence-beyond-primitive-iterations-in-swift-80bc2507d8cc ///  ...
    
			
    10. 
						
  10. WdatePicker组件不显示
			
    突然发现时间组件不显示了,以为是浏览器的问题.在本地服务器测试了一下发现一切正常. 怀疑是前段时间中毒引起的,用工具比对了一下WdatePicker的文件包,发现My97DatePicker.htm这 ...
    
			
    11.