可视区尺寸
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. nhibernat4.0.0.4000 bug
			
    //类 NHibernate.Loader.Loader 中 protected virtual string[] ResultRowAliases { get { return null; } }  ...
    
			
    2. 
						
  2. leetcode 32. Longest Valid Parentheses
			
    Given a string containing just the characters '(' and ')', find the length of the longest valid (wel ...
    
			
    3. 
						
  3. [转载]localhost与127.0.0.1的区别
			
    原文链接:http://blog.csdn.net/xifeijian/article/details/12879395 很多人会接触到这个ip地址127.0.0.1.也许你会问127.0.0.1是什 ...
    
			
    4. 
						
  4. FTP 传输中的主动模式和被动模式
			
    最近做一个项目用到FTP和其它系统进行文件传输,结果在FTP网络连接的问题上花了很多时间,由于太久没搞多FTP,忘记了FTP不单单开放21端口,客户端采用不同连接模式对网络有不同.在此重温一下FTP的 ...
    
			
    5. 
						
  5. (备忘)android清单文件中<meta-data>标签,以及<intent-filter>下的<data>标签及其他标签
			
    1.metadata可以写在application下也可以写在activity下,作为全局或activity内共享的数据 以键值对形式保存 <meta-data android:name=&qu ...
    
			
    6. 
						
  6. linux shell脚本常用语句
			
    linux shell 指令 诸如-d, -f, -e之类的判断表达式: 文件比较运算符-e filename  如果 filename存在,则为真  [ -e /var/log/syslog ]-d ...
    
			
    7. 
						
  7. 读书笔记-JVM
			
    局部变量表(虚拟机栈中的一部分)在编译期完成分配,运行期不会再改变大小: 每个方法对应一个栈帧(存储局部变量表.操作数栈.动态链接.方法出口等),栈帧被存储到虚拟机栈中,每个线程对应一个虚拟机栈,方法 ...
    
			
    8. 
						
  8. jquery学习——遍历
			
    1.each() $(selector).each(function(index,element)) var arr = [ "a", "bb", " ...
    
			
    9. 
						
  9. 蓝牙模块连接后出现ANR，日志记录
			
    11-25 16:29:48.433 14507-14561/myapplication.com.myblue W/MALI: glDrawArrays:714: [MALI] glDrawArray ...
    
			
    10. 
						
  10. 【GoLang】GoLang 单元测试、性能测试使用方法
			
    单元测试代码: ackage test import ( // "fmt" "testing" ) func Test_FlowControl(t *testi ...
    
			
    11.