1. 窗口的大小即浏览器的大小:
window.innerWidth, window.innerHeight, window.outerHeight, window.outerWidth
在IE9+,Safari,Firefox, Chrome中,outerWidth和outerHeight返回浏览器窗口本身的大小(无论是从最外层的window对象还是从某个框架访问), innerHeight和innerWidth是指视口的大小,即浏览器可视区域的大小。
在opera中,outerWidth和outerHeight表示页面可见区域的大小(不知道能不能这么说,书上说的是,页面视图容器的大小,待测试)
 
在IE8及更早版本中,没有取得当前浏览器窗口尺寸的属性,不过,它通过DOM提供了页面可见区域的相关信息
在IE,Firefox,Safari,Opera和Chrome中保存了页面视口的信息:
document.documentElement.clientHeight和document.documentElement.clientWidth, 如果是混杂模式则需要使用document.body.clientWidth和document.body.clientHeight。
 
目前测试Firefox和Chrome都有document.body.clientWidth和document.body.clientHeight, 结果是body的设置的高度,如果没有设置则为实际高度,不包括margin的上下8px,也就是16px
 
判断浏览器视口大小的方法
var pageWidth = window.innerWidth,
      pageHeight = window.innerHeight;
if(typeof pageWidth !== "number"){
    if(document.compatMode == "CSS1Compat"){
          pageWidth = document.documentElement.clientWidth;
          pageHeight = document.documentElement.clientHeight;    
     }else{
          pageWidth = document.body.clientWidth;
          pageHeight = document.body.clientHeight;
     }
}
 
Firefox 和Chrome中body的默认margin为8px,所以需要reset样式。否则window.innerWidth会比实际的少16px
 
 
在移动设备上,window.innerWidth和window.innerHeight保存着可见视口,也就是屏幕上可见页面区域的大小,而document.documentElement获取的是布局视口,即页面的实际大小。
移动IE浏览器不支持window的那些属性,但是通过document.documentElement.clientWidth和document.documentElement.clientHeight可以获取可见视口的信息,通过document.body可以获取布局视口的信息。
 
判断浏览器滚动的高度:不建议用 “scrollWidth和scrollHeight, scrollTop, scrollLeft”这些,因为存在浏览器兼容问题
问题是在chrome和firefox中取得scrollTop的前缀不同,chrome中用document.body取,而在firefox中,document.body取得的值是0,用document.documentElement取得的值才是正确的。
我们用document.documentElement.
document.documentElement.scrollWidth和document.documentElement.scrollHeight表示body的实际尺寸,目前测试chrome,firefox正确.
判断是否滚动到底部:
var buttom = document.documentElement.scrollHeight - window.innerHeight - window.scrollY;
if(bottom > 0){
//do sth
}
 
window.scrollBy(xnum, ynum);
 
高级程序设计第三版,198页
 
2. 元素大小
    a. 偏移量
offsetHeight: 元素在垂直方向上占用空间的大小,以像素计,包括元素的高度,(可见的)水平滚动条的高度,上边框高度,下边框高度和内边距。
offsetWidth: 元素在水平方向上占用空间的大小,以像素计,包括元素的宽度,(可见的)垂直滚动条的高度,左边框高度,右边框高度和内边距。
offsetLeft: 元素的左外边框至包含元素的左内边框之间的像素距离。
offsetTop: 元素的上外边框至包含元素的上内边框之间的像素距离。
包含元素的引用包含在offsetParent属性中,指据该元素最近的一个具有大小的父元素
clientWidth和clientHeight是不包含border的部分
scrollWidth和scrollHeight,分两种情况,第一种是没有滚动条的时候,和clientWidth和clientHeight 的值是相同的,即不包含border部分。第二种情况是有滚动条的时候,表示元素的实际大小
scrollLeft 和scrollTop 表示隐藏部分的大小,可以修改, 如设置element.scrollTop = 0, 则元素内容滚动到了元素顶部.
 
如有问题,欢迎大家批评指正。

js中窗口大小和单个元素大小的计算的更多相关文章

  1. js中如何删除某个元素下面的所有子元素?(两种方法)

    js中如何删除某个元素下面的所有子元素?(两种方法) 一.总结 方法一:通过元素的innerHTML属性 元素element.innerHTML=""; 方法二:通过元素的remo ...

  2. JS高程12.2.3元素大小的学习笔记

    <JavaScript高级程序设计>中讲述了通过JS如何控制页面中元素的大小,其中涉及到三对属性:偏移量,客户区大小,滚动大小.以前自己经常看到这三对属性,但是具体不是很清楚,容易混淆.所 ...

  3. js中怎么为同级元素添加点击事件

    事件件是javascript脚本语言的重要组成部分,因为有事件才使用户页面的体验更加的美好.元素添加事件是js语言中最基础的.我们可以为元素本身添加事件,也可以通过事件绑定和事件监听为元素的父元素和子 ...

  4. js中cssText批量修改元素样式

    平常编写代码,更改一个元素样式的时候,自己都是用 obj.style.width = "200px"; obj.style.position = "absolute&qu ...

  5. JS中根据某个值进行大小排序

    //从大到小排序 function compareBigToSmall(property){ return function(a,b){ var value1 = a[property]; var v ...

  6. H5在js中向指定的元素添加样式

    今天在做一个按钮的功能控制,点击之后,要根据判断条件,修改按钮的样式,然后就发现了一个巨好用的方法, <button type="button" id="btn_A ...

  7. JS中使用时间戳,获取当前日期,计算前一周的日期~

    今天项目中用到了一点 随便记录一下 function timestampToTime(timestamp) { );//时间戳为10位需*1000,时间戳为13位的话不需乘1000 var Y = d ...

  8. JS 验证数组中是否包含重复元素

    验证JS中是否包含重复元素,有重复返回true:否则返回false 方案一. function isRepeat(data) { var hash = {}; for (var i in data) ...

  9. jQuery2.0.3源码分析系列(28) 元素大小

    最近的分析都是有点不温不火,基本都是基础的回顾了 今年博客的目标目前总的来说有2大块 JS版的设计模式,会用jQuery来诠释 JS版的数据结构,最近也一直在狠狠的学习中. HTML息息相关的的样式 ...

随机推荐

  1. ksoap2- webservice

    1.概述 对于J2ME访问远端的Web Service,除了官方标准JSR 172,我们还有两种选择: l         kSOAP l         Wingfoot Wingfoot是由Win ...

  2. PHP使用GD2库画图,图像无法输出解决方法

    在CS6编辑环境下,使用php的GD2库绘制图像,在浏览器上输出可能会出现图像无法输出的情况,目前发现两个解决方法:方法1:用记事本写,再另存为utf-8 no bom的格式. 方法2:在代码中添加o ...

  3. 简单的cd命令

    cd ~ :进入home目录 cd   :进入home目录 cd - :进入上一个目录 cd /home/venn : 进入指定目录 当然,我想说的是cd(不加任何路径),进入home目录

  4. Delphi ShellExecute的用法

    请在interface处uses句中加入ShellAPI 有三个API函数可以运行可执行文件WinExec.ShellExecute和CreateProcess.1.CreateProcess因为使用 ...

  5. iconfont.cn阿里巴巴矢量图下载字体图标实战

    1.阿里巴巴矢量图网址:www.iconfont.cn 2.然后用新浪微博账号登录 3.输入要查找的图标相应的关键字,回车 4.滑过要找的图标,点击购物车,让图标存储到暂存架中 5.点击暂存架,存储为 ...

  6. 阿里云上给的防止跨站和xss攻击的代码

    文档说明: 1.将waf.php传到要包含的文件的目录 2.在页面中加入防护,有两种做法,根据情况二选一即可: a).在所需要防护的页面加入代码require_once('waf.php');就可以做 ...

  7. Angular - - ngRoute Angular自带的路由

    ngRoute $routeProvider 配置路由的时候使用. 方法: when(path,route); 在$route服务里添加一个新的路由. path:该路由的路径. route:路由映射信 ...

  8. C# 堆栈和堆 Heap & Stack

    首先堆栈和堆(托管堆)都在进程的虚拟内存中.(在32位处理器上每个进程的虚拟内存为4GB) 堆栈stack 堆栈中存储值类型. 堆栈实际上是向下填充,即由高内存地址指向低内存地址填充. 堆栈的工作方式 ...

  9. Spinnerd的功能和用法

    此处的Spinner其实是一个列表选择框.不过Android的列表选择框并不是需要下拉列表的,而是相当于弹出一个菜单供用户选择. Spinner和Gallery都继承了AbsSpinner,AbsSp ...

  10. Spring的 classpath 通配符加载配置文件

    http://www.cnblogs.com/taven/archive/2012/10/24/2737556.html classpath:app-Beans.xml 说明:无通配符,必须完全匹配 ...