javascript中的几何属性汇总

客户端javascript对象的几何属性汇总

 

       在一些客户端javascript对象中，存在着如宽度、高度、坐标类的几何属性，同时这些属性在不同的浏览器下又有不同的属性名。现在将所有的此类对象的几何属性汇总，便于学习，免得搞混。

1. 浏览器窗口在桌面的坐标（x,y）

Window对象

       IE下：window.screenLeft, window.screenTop（经测试，发现在IE浏览器下，该坐标为文档在屏幕上面的坐标，并非浏览器窗口在屏幕上面的坐标）

Firefox下：window.screenX, window.screenY

2. 浏览器的可视化窗口大小

所有浏览器除了IE：window.innerWidth, window.innerHeight

       IE6 with DOCTYPEL：document.documentElement.clientWidth, document.documentElement.clientHeight

       IE6 without DOCTYPE：document.body.clientWidth, document.body.clientHeight

3. 浏览器整个窗口的大小

Window对象

       IE不支持：window.outerWidth, window.outerHeight

4. 文档滚动条滚过的宽度和高度

所有浏览器除了IE：window. pageXOffset, window. pageYOffset

       IE6 with DOCTYPEL：document.documentElement.scrollLeft, document.documentElement. scrollTOP

       IE6 without DOCTYPE：document.body. scrollLeft, document.body. scrollTop

5. 元素的坐标和大小

坐标：Element.offsetLeft, Element.offsetTop（此值为相对坐标，相对于body或者其他相对定位的父元素；关于元素绝对位置的计算，还需要考虑父元素offsetParent的坐标）

       大小：Element.offestWith, Element.offsetHeight；clientWidth, clientHeight；ScrollWidth, ScrollHeight

scrollWidth：对象的实际内容的宽，不包边线宽度，会随对象中内容的多少改变（内容多了可能会改变对象的实际宽度）

clientWidth：对象可见的宽度，不包滚动条等边线，会随窗口的显示大小改变。

      offsetWidth：对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变。

6. 鼠标的坐标

Event对象

       Event.clientX, Event.clientY（同时要注意IE和Firefox下兼容性的事件写法）

7. 屏幕宽度、高度和屏幕的可用宽度、高度

Screen对象

       屏幕宽度、高度；screen.width, screen.height（屏幕的宽度，像素值）

       屏幕的可用宽度、高度：screen.availWidth, screen.availHeight（除去了一些不自动隐藏的类似任务栏的东西所占用的宽度）

8. 元素的css属性宽度、高度、外边距、内边距、坐标

Element对象

       Element.style.width, Element.style.height

       Element.style.marginLeft, Element.style.marginTop

Element.style.paddingLeft, Element.style.;paddingTop

Element.style.left, Element.style.top

（注：下图来自于 "web前端开发群" 风干的果子）

来自: http://hi.baidu.com/sgooo/blog/item/8bf7dd453e20fe34869473cc.html