JavaScript中尺寸、坐标

2022-11-07 08:26:38

测试环境是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.outerWidth和Window.outerHeight返回浏览器窗口本身的尺寸。而Window.innerWidth和Window.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中clientWidth和clientHeight属性，用于取得元素的可视区域的尺寸，不包含滚动条【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.offsetTop和HTMLElement.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知识

码农公寓

一、尺寸

二、坐标

相关文章