JavaScript中尺寸、坐标

时间:2021-01-19 05:51:12

测试环境是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个设备像素

JavaScript中尺寸、坐标

我用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知识