JavaScript中尺寸、坐标

简介:

测试环境是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()方法返回的对象中没有heightwidth属性。

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



    本文转自 咖啡机(K.F.J)   博客园博客,原文链接:http://www.cnblogs.com/strick/p/4826273.html,如需转载请自行联系原作者




相关文章
|
5月前
|
JavaScript 前端开发 UED
JS:如何获取浏览器窗口尺寸?
JS:如何获取浏览器窗口尺寸?
231 1
|
2月前
|
JavaScript 前端开发
JavaScript的尺寸
JavaScript的尺寸
12 0
|
3月前
|
JavaScript
js document.compatMode【详解】(含准确获取浏览器宽高等尺寸的方法)
js document.compatMode【详解】(含准确获取浏览器宽高等尺寸的方法)
25 0
|
4月前
|
JavaScript 前端开发
js怎样获取浏览器窗口尺寸
js怎样获取浏览器窗口尺寸
|
5月前
|
JavaScript 前端开发
js怎样获取浏览器窗口尺寸
js怎样获取浏览器窗口尺寸
55 1
|
JavaScript
js获取屏幕上圆和椭圆的点坐标
js获取屏幕上圆和椭圆的点坐标
js获取屏幕上圆和椭圆的点坐标
|
10月前
|
JavaScript
js获取元素相对于document的坐标
js获取元素相对于document的坐标
51 0
|
11月前
|
JavaScript 前端开发
js怎样获取浏览器窗口尺寸
js怎样获取浏览器窗口尺寸
49 0
【Three.js入门】处理动画、尺寸自适应、双击进入/退出全屏(Clock跟踪时间,Gsap动画库,自适应画面,进入/退出全屏)
【Three.js入门】处理动画、尺寸自适应、双击进入/退出全屏(Clock跟踪时间,Gsap动画库,自适应画面,进入/退出全屏)
132 0
|
JavaScript API
Js:ResizeObserver 接口监视HTML元素尺寸的变化
Js:ResizeObserver 接口监视HTML元素尺寸的变化
101 0
Js:ResizeObserver 接口监视HTML元素尺寸的变化