javascript快速入门19—定位

元素的style属性width，height，但这些属性往往返回空值，因为它们只能返回使用行内style属性定义在元素上的样式
元素的currentStyle属性width，height（IE），getComputedStyle(obj,null)返回对象的width，height，这样可以获取元素的实际CSS定义的宽度和高度，但当元素没有使用CSS定义外观时，虽然元素仍然有大小（只要其中有字符或其它元素），这些属性的返回值是不确定的，如IE返回auto,而火狐则返回一个看似理想的值。
对象的clientWidth和clientHeight属性给出元素的可视部分的宽度和高度,当有滚动条时，只返回可见区域大小,对于块级元素,将返回元素的所设置的宽度和高度加上填充(padding)，这一点几乎所有浏览器都达成一致.但当块级元素并没有设置宽和高以及填充时,就出现不同了,谷歌浏览器和火狐浏览器的报告一致,IE报告都为0,而Opera则有所偏差.再将这两个属性应用到行内元素上,IE和火狐都报告为0,谷歌报告了一个看似理想的数字,而Opera竟会一个为正另一个负!
对象的offsetWidth和offsetHeight属性用来取得对象在页面中的实际所占区域大小(所设置的宽高加边框加填充，当有滚动条时还会算上滚动条),似乎这个属性对于设置了宽和高的块级元素几乎没有什么浏览器兼容问题,但不得不说的是火狐的一个BUG.火狐浏览器有个可将页面放大缩小的功能,当将页面缩小后,对象的offsetWidth和offsetHeight属性会发生细微的变化-变小几像素!尽管这对JS编程来讲几乎没影响,但似乎这个BUG也太明显了.这两个属性变非总是那么让人信任,当对象并没设置宽高或它是一个行内元素时,它的报告就显得相当复杂,不同浏览器都有自己一套标准(但是仍然可以肯定的是这两个属性报告的仍然是该元素占据的的空间大小,只不过会因字体和空格的默认大小不同而不同),最让人摸不着头脑的是Opera,对于一个body的子块级元素,当body和它自身没设置宽高时,Opera报告的它的宽度相当大,6千多像素!

对于窗口视口（视口指显示页面的那部分）的大小，Mozilla提供了window.innerWidth与window.innerHeight两个属性，而IE则没有相对应的属性，但可以使用document.documentElement.clientWidth与document.documentElement.clientHeight 两个属性来获取！另外，对于IE6之前的版本，则需要使用document.body的clientWidth与clientHeight属性！

元素style属性的borderWidth，但同样它只能返回使用HTML行内style属性定义的边框样式
使用currentStyle属性或getComputedStyle方法，可以获取元素CSS定义的实际边框样式，如果CSS没有定义元素的边框，一般的元素是没有边框的，但部分元素，如表单控件，仍然具有默认的边框宽度！对于此类情况，也是不能依靠这种方法来获取元素的边框大小的！
对象的clientLeft和clientTop属性。不能不说clientLeft和clientTop的名字起的太奇怪了,事实上它们的名字更应该这样:clientBorderLeftWidth和clientBorderTopWidth(难道是太长了的原因?);更奇怪的是,它们只能取得设置在元素上的左边框和上边框的粗细,而没有返回右边和下边的边框宽度的属性!另外,对于文档根元素(documentElement),在IE中它有默认的两像素边框宽度,而其它浏览器中报告为0.

获取元素坐标方法：

元素style属性的left,top属性，不但这种方法仅适用于使用HTML style属性声明样式的元素，并且只有当元素使用定位（position设置为relative,absolute,fixed,但不包含static）时，才会存在这些值
元素currentStyle属性或getComputedStyle方法返回的Style对象的left,top属性，但这种方法仅对采用定位的元素有作用

clientX与clientY返回事件发生时鼠标在视口中的坐标；offsetX与offsetY返回事件发生时鼠标相对于目标对象的坐标，以目标对象右上角为坐标原点，而这两个属性的W3C DOM版本则为layerX与layerY；pageX与pageY返回事件发生时鼠标相对于页面的坐标，虽然这个属性IE不支持，但仍然有补救的余地！