测试环境是IE8,Chrome38,Firefox40,下面是全局通用脚本打印代码

/**
* 打印
*/
function write(str) {
document.write(str + '<br/>');
}

一、尺寸

在container外面我还套了个container_out,宽度为1000px,方便演示用,HTML代码如下:

<div class="container_out">
<div id="container"></div>
</div>
var container = document.getElementById('container');

/**
* 通用获取CSS属性
*/
function getStyle(el, name) {
if(window.getComputedStyle) {//标准浏览器
return window.getComputedStyle(el, null).getPropertyValue(name);
}else {//IE浏览器
  //需要变成驼峰方式
name = name.replace(/\-(\w)/g, function(word, first) {
return first.toUpperCase();
});
return el.currentStyle.getAttribute(name);
}
}

1)CSS获取width、height

分别在container中,width写为200px、10%和不设置。

/**
* 使用CSS,px %,不设置
*/
var cssWidth = getStyle(container, 'width');
write(cssWidth);

在3个浏览器中展现的有所不同,如下面表格中所示,IE展现的就是比较与众不同:

 

firefox

chrome IE8
width:200px

200px

200px 200px
width:10%

100px

100px 10%
宽度不设置

956px

956px  auto
display:none;width:200px

200px

200px 200px
display:none;宽度不设置

auto

auto auto
position:absolute;width:200px

200px

200px 200px
position:absolute;宽度不设置

0px

0px auto

2)offsetWidth、offsetHeight

这是HTMLElement类中的两个属性。

offsetWidth = width+padding+border

offsetHeight = height+padding+border

/**
* offsetWidth、offsetHeight
*/
var offsetWidth = container.offsetWidth;
write(offsetWidth);

这里获取到的数据是没有单位的,浏览器结果如下:

 

firefox

chrome IE8
width:200px

224

224 224
width:10%

124

124 124
宽度不设置

980

980  980
display:none;width:200px

0

0 0
display:none;宽度不设置

0

0 0
position:absolute;width:200px

224

224 224
position:absolute;宽度不设置

24

24 24

结合公式和第一张表中对应的数据可以计算出结果

当display:none的时候,得到的数据都为0

3)innerWidth、innerHeight、outerWidth和outerHeight

这4个window属性在IE6、IE7和IE8不支持。

在Firefox中,Window.outerWidthWindow.outerHeight返回浏览器窗口本身的尺寸。而Window.innerWidthWindow.innerHeight则表示该容器中页面视图区的大小(减去边框宽度)。

在Chrome中,outerWidth.outerHeight与innerWidth,innerHeight返回相同的值,即视口(viewport)大小而非浏览器窗口大小。

 

firefox

chrome IE8
innerWidth

1366

1366 undefined
outerWidth

1382

1366 undefined

这里顺便介绍两个概念:「css像素」、「设备像素」;css像素和设备像素 是容纳的关系。在缩放倍数是200%的情况下,1个css像素容纳了4个设备像素

我用chrome浏览器,“control+鼠标滚轮”进行放大,放到到200%的时候“innerWidth=683”,正好是原来的一半。

所以window.innerWidth度量单位是css pixels。经测试,“offsetWidth”与“clientWidth”也是css pixels,而“screen.width”是设备像素。

4)clientWidth、clientHeight

这两个是Element类中的属性。

IE中clientWidthclientHeight属性,用于取得元素的可视区域的尺寸,不包含滚动条【innerWidth包含滚动条】、隐藏元素和边框。在body中设置高度为2000px,出现滚动条。

/**
* clientWidth、clientHeight
* 标准模式:document.documentElement.clientWidth
* 怪异模式:document.body.clientWidth
*/
var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
write('clientWidth:'+clientWidth);
  firefox chrome IE8
clientWidth 1349 1349 1345

5)scrollWidth、scrollHeight

IE、Opera中:Element.scrollWidth = 网页内容实际宽度,可以小于clientWidth

FF:scrollWidth = 网页内容宽度,不过最小值是clientWidth

在MDN上查看Element.scrollHeight

/**
* scrollWidth、scrollHeight
*/
var scrollWidth = document.documentElement.scrollWidth;
write('scrollWidth:'+scrollWidth);
 

firefox

chrome IE8
scrollWidth

1349

1349 1345

二、坐标

#container{
display: none;
/*其他属性一样*/
}
.coordinate_out {
position: relative;
top:100px;
left:100px;
width: 500px;
}
#coordinate{
left:100px;
top:250px;
height:30px;
width: 30px;
background: #9ACD32;
position: absolute;
border: 2px solid red;
}

接下来的操作会将#container隐藏掉,CSS添加一条属性:display: none;

1)offsetTop、offsetLeft

<div class="coordinate_out">
<div id="coordinate"></div>
</div>

即使一个元素没有被定位,它的HTMLElement.offsetTopHTMLElement.offsetLeft也是有效的。

它们是相对于offsetParent的距离,一级级向上累加,就得到相对页面的坐标。

/**
* 累加页面坐标
*/
function offsetSum(node) {
var top=0, left=0
while(node) {
top = top + parseInt(node.offsetTop);
left = left + parseInt(node.offsetLeft);
node = node.offsetParent;
}
return {top: top, left: left}
}
 

firefox

chrome IE8
top

350

350 350
left

200

200 200

2)node.getBoundingClientRect()

  node.getBoundingClientRect()方法的返回值是一个包含了一组文本矩形的文本矩形对象。

返回值是一个DOMRect对象,这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合, 即:是与该元素相关的CSS 边框集合 。

在IE8或者更低浏览器版本中,getBoudingClientRect()方法返回的对象中没有height和width属性。

1.外面不套relative

<div id="coordinate"></div>

left和top与上面的CSS中定义的一样。

 

firefox

chrome IE8
top

250

250 250
left

100

100 100
width

30

30 undefined
height

30

30 undefined

2.外面套个relative

<div class="coordinate_out">
<div id="coordinate"></div>
</div>

与上面累加计算的结果一致,可以看到自己会做计算:

left = left + 父级的left;top = top + 父级的top。

 

firefox

chrome IE8
top

350

350 350
left

200

200 200

3)clientLeft、clientTop

Element.clientLeft:一个元素的左边框的宽度,以像素表示。clientLeft 不包括左外边距和左内边距。clientLeft 是只读的。

Element.clientTop:一个元素顶部边框的宽度(以像素表示)。不包括顶部外边距或内边距。clientTop 是只读的。

在coordinate中加了border: 2px solid red,三个浏览器返回的都是2

/**
* clientTop clientLeft
*/
var client_top = coordinate.clientTop;
var client_left = coordinate.clientLeft;
write('client-top:'+client_top);
write('client-left:'+client_left);

4)scrollTop、scrollLeft和pageYOffset、pageXOffset

“外层元素中的内容”高过了“外层元素”本身.当向下拖动滚动条时,有部分内容会隐没在“外层元素的上边界”之外。

Element.scrollTop:指的就是这部分“不可见的内容”的高度。

window.pageYOffset:指的是滚动条顶部到网页顶部的距离,IE6、IE7、IE8不支持此属性。

我给body设置了高度2000px,然后把滚动条下拉到最下面做测试:

 

firefox

chrome IE8
window.pageYOffset

1392

1317 undefined
document.documentElement.scrollTop

1392

0 1416
document.body.scrollTop

0

1317 0

在做IE8的测试的时候,每次返回的都是0,无奈只能写个onscroll事件,实时添加高度,并在html中新增标签p:

<p id="scroll"></p>
/**
* pageYOffset scrollTop pageXOffset scrollLeft
*/
var page_YOffset = window.pageYOffset;
var page_escrollTop = document.documentElement.scrollTop;
var page_bscrollTop = document.body.scrollTop;
write('page-YOffset:'+page_YOffset);
write('element-scrollTop:'+page_escrollTop);
write('body-scrollTop:'+page_bscrollTop); window.onscroll = function() {
var onscroll_top = document.documentElement.scrollTop;
document.getElementById('scroll').innerHTML = 'scrollTop:' + onscroll_top;;
}

通过上面的数据可以看到,虽然数字不一样,但是都是通过不太一样的属性获取到的,所以需要做兼容性的处理:

var scrollTop = window.pageYOffset|| document.documentElement.scrollTop || document.body.scrollTop;

demo下载:

http://download.csdn.net/detail/loneleaf1/9132279

参考资料:

http://www.jxbh.cn/newshow.asp?id=1363&tag=2  跨浏览器窗口大小兼容js及innerWidth、innerHeight、outerWidth和outerHeight属性

http://www.zhangxinxu.com/wordpress/2012/05/getcomputedstyle-js-getpropertyvalue-currentstyle/  获取元素CSS值之getComputedStyle方法熟悉

http://www.cnblogs.com/fullhouse/archive/2012/01/16/2324131.html   JS中关于clientWidth offsetWidth scrollWidth 等的含义

《JavaScript框架设计》 人民邮电出版社 司徒正美

http://javascript.info/tutorial/coordinates   Coordinates

http://www.zhangxinxu.com/wordpress/2011/09/cssom%E8%A7%86%E5%9B%BE%E6%A8%A1%E5%BC%8Fcssom-view-module%E7%9B%B8%E5%85%B3%E6%95%B4%E7%90%86%E4%B8%8E%E4%BB%8B%E7%BB%8D/    CSSOM视图模式(CSSOM View Module)相关整理

http://www.hujuntao.com/web/javascript/something-about-javascript-scrolltop.html   关于javascript scrollTop那点事

http://www.penglig.com/post-322.html   浏览器模式与窗口 scrollTop 的兼容性问题总结

https://segmentfault.com/a/1190000004403496   理解flexible.js所需的viewport知识

JavaScript中尺寸、坐标的更多相关文章

  1. javascript中常用坐标属性offset、scroll、client

    原文:javascript中常用坐标属性offset.scroll.client 今天在学习js的时候觉得这个问题比较容易搞混,所以自己画了一个简单的图,并且用js控制台里面输出测试了下,便于理解. ...

  2. javascript中关于坐标 大小 的描述

    window对象 有效桌面的大小,除去桌面下面的任务栏的高度 window.screen.availHeight : window.screen.availWidth :   浏览器窗口的左上角相对于 ...

  3. Javascript中String对象的的简单学习

    第十一课String对象介绍1:属性    在javascript中可以用单引号,或者双引号括起来的一个字符当作    一个字符对象的实例,所以可以在某个字符串后再加上.去调用String    对象 ...

  4. JavaScript中的浏览器对象模型

    浏览器对象模型 1.浏览器引入JavaScript 1.直接在HTML文件中引入 首先第1种方式就是直接在HTML文档里面引入JavaScript代码.在维护一些老项目的时候,经常 可以看到J ava ...

  5. JavaScript中的百变大咖~this

    原文链接:http://www.jeffjade.com/2015/08/03/2015-08-03-javascript-this/ JavaScript作为一种脚本语言身份的存在,因此被很多人认为 ...

  6. JavaScript中常见的字符串操作函数及用法

    JavaScript中常见的字符串操作函数及用法 最近几次参加前端实习生招聘的笔试,发现很多笔试题都会考到字符串的处理,比方说去哪儿网笔试题.淘宝的笔试题等.如果你经常参加笔试或者也是一个过来人,相信 ...

  7. 浅谈JavaScript中的this

    引言 JavaScript 是一种脚本语言,因此被很多人认为是简单易学的.然而情况恰恰相反,JavaScript 支持函数式编程.闭包.基于原型的继承等高级功能.本文仅采撷其中的一例:JavaScri ...

  8. Javascript中递归造成的堆栈溢出及解决方案

    关于堆栈的溢出问题,在Javascript日常开发中很常见,Google了下,相关问题还是比较多的.本文旨在描述如何解决此类问题. 首先看一个实例(当然你可以使用更容易的方式实现,这里我们仅探讨递归) ...

  9. 深入浅出 JavaScript 中的 this

    在 Java 等面向对象的语言中,this 关键字的含义是明确且具体的,即指代当前对象.一般在编译期确定下来,或称为编译期绑定.而在 JavaScript 中,this 是动态绑定,或称为运行期绑定的 ...

随机推荐

  1. ASP.NET Aries 入门开发教程5:自定义列表页工具栏区

    前言: 抓紧时间,继续写教程,因为发现用户期待的内容,都在业务处理那一块. 不得不继续勤劳了. 这节主要介绍工具栏区的玩法. 工具栏的默认介绍: 工具栏默认包括5个按钮,根据不同的权限决定显示: 添加 ...

  2. UWP中新加的数据绑定方式x:Bind分析总结

    UWP中新加的数据绑定方式x:Bind分析总结 0x00 UWP中的x:Bind 由之前有过WPF开发经验,所以在学习UWP的时候直接省略了XAML.数据绑定等几个看着十分眼熟的主题.学习过程中倒是也 ...

  3. 对Castle Windsor的Resolve方法的解析时new对象的探讨

    依赖注入框架Castle Windsor从容器里解析一个实例时(也就是调用Resolve方法),是通过调用待解析对象的构造函数new一个对象并返回,那么问题是:它是调用哪个构造函数呢? 无参的构造函数 ...

  4. jQuery学习之路(2)-DOM操作

    ▓▓▓▓▓▓ 大致介绍 jQuery作为JavaScript库,继承并发扬了JavaScript对DOM对象操作的特性,使开发人员能方便的操作DOM对象. ▓▓▓▓▓▓ jQuery中的DOM操作 看 ...

  5. Android 剪贴板详解

    版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/Clipboard 如本文有助于你理解 Android 剪贴板,不妨给我一个 Star.对于码农而言, ...

  6. springMVC初探--环境搭建和第一个HelloWorld简单项目

    注:此篇为学习springMVC时,做的笔记整理. MVC框架要做哪些事情? a,将url映射到java类,或者java类的方法上 b,封装用户提交的数据 c,处理请求->调用相关的业务处理—& ...

  7. CSS 3学习——transition 过渡

    以下内容根据官方规范翻译以及自己的理解整理. 1.介绍 这篇文档介绍能够实现隐式过渡的CSS新特性.文档中介绍的CSS新特性描述了CSS属性的值如何在给定的时间内平滑地从一个值变为另一个值. 2.过渡 ...

  8. 流程表单中js如何清空SheetUser控件数据?

    昨天有人问我js怎么清空.我试了试,发现简单的赋给他空值,并没有用.只能给他赋一个真实存在的值才有用.于是跟踪了一下他的删除按钮. 效果如下 使用场景:可以根据字段的不同类别变更人员. js代码如下, ...

  9. android_m2repository_rxx.zip下载地址以及MD5

    地址 MD5 https://dl-ssl.google.com/android/repository/android_m2repository_r08.zip 8C8EC4C731B7F55E646 ...

  10. Mysql - 触发器/视图

    触发器在之前的项目中, 应用的着实不多, 没有办法的时候, 才会去用这个. 因为这个东西在后期并不怎么好维护, 也容易造成紊乱. 我最近的项目中, 由于数据库设计(别人设计的)原因, 导致一些最简单功 ...