javascript获取 元素大小、位置、事件发生时的坐标

整理了一下 “定位”的知识（以前总是晕头转向的），很实用哦。。。

导航一下：

元素尺寸
元素边框宽度
元素坐标(另+offsetParent)
滚动条位置
鼠标事件位置

元素尺寸：

clientWidth,clientHeight{
	给出元素的可视部分的宽度和高度:{
		当有滚动条时:"只返回可见区域大小."
		块级元素:{
			有宽高:"返回元素的所设置的宽度和高度加上填充(padding),这一点几乎所有浏览器都达成一致."
			没宽高:"谷歌浏览器和火狐浏览器的报告一致,IE报告都为0,而Opera则有所偏差."
		},
		行内元素:"IE和火狐都报告为0,谷歌报告了一个看似理想的数字,而Opera竟会一个为正另一个负!"
	}
}
offsetWidth,offsetHeight{
	对象在页面中的实际所占区域大小:{//所设置的宽高加边框加填充，当有滚动条时还会算上滚动条
		设置了宽和高的块级元素:"几乎没有什么浏览器兼容问题."
		没设置宽高或它是行内元素:"它的报告就显得相当复杂,不同浏览器都有自己一套标准(但是仍然可以肯定的是这两个属性报告的仍然是该元素占据的的空间大小,只不过会因字体和空格的默认大小不同而不同),最让人摸不着头脑的是Opera,对于一个body的子块级元素,当body和它自身没设置宽高时,Opera报告的它的宽度相当大,6千多像素!"
	},
	火狐bug:"火狐浏览器有个可将页面放大缩小的功能,当将页面缩小后,对象的offsetWidth和offsetHeight属性会发生细微的变化-变小几像素!尽管这对JS编程来讲几乎没影响,但似乎这个BUG也太明显了."
}
scrollWidth,scrollHeight{
	就目前来讲,对于一个没有滚动条和溢出的元素,其它浏览器对这个属性的报告还算有规律:对象的clientWidth+border=scrollWidth.对象的clientHeight+border=scrollHeight;只有IE报告有问题!它以元素中的内容为准,如果元素内没有其它内容,虽然IE并不会报0,但会报告一个非常小的值!再看看当元素有滚动条时怎么样吧!唯一值得高兴的是,它们对有滚动条的元素的clientWidth和clientHeight都报告一致(但仍有一点要注意,那就是火狐的一BUG,页面缩放功能带来的郁闷,而且这次变化非常大).而对于scrollWidth和scrollHeight真是五花八门:先说好的,尽管各不一样,但它们对scrollWidth不知为什么,相差不大,那么坏的就是,scrollHeight属性就相差太大了,没规律可循!(scrollWidth和scrollHeight属性返加对象内容的实际所需空间,当元素设置了overflow值为scroll或hidden之类时,scrollWidth和scrollHeight属性就派上用场了,可惜的是它问题太多了)
}

元素边框宽度：

clientLeft和clientTop{
	元素边框宽度:"它们只能取得设置在元素上的左边框和上边框的粗细,而没有返回右边和下边的边框宽度的属性!",
	ie:"对于文档根元素(documentElement),在IE中它有默认的两像素边框宽度,而其它浏览器中报告为0."
}

元素坐标：

offsetLeft,offsetTop{
	返回元素在页面中相对于父元素的坐标,当其自身有边距时（margin）,还会加上边距.
	对于没有采用定位的块级元素，offsetLeft与offsetTop属性将返回其自身的margin+父元素的padding.
}
offsetParent{
	属性返回元素的相对定位的父元素。
	当使用定位时，各个浏览器一致，并且和CSS里设置的吻合，当不使用定位时，父元素是WHO成了问题，各个浏览器认识不一样，IE报告为其父节点，而其它浏览器则报告为body，当然，这次IE正确了。
}

滚动条位置：

scrollLeft,scrollTop{
	对于页面的滚动条，则取documentElement的scrollLeft与scrollTop属性
	对于谷歌浏览器，它会将页面的滚动条视为document.body的！
}

鼠标事件位置：

事件发生时鼠标在视口中的坐标{
	ie & w3c : clientX & clientY
}

事件发生时鼠标相对于页面的坐标{
	ie : clientX+scrollLeft & clientY+scrollTop
	w3c : pageX & pageY
}

事件发生时鼠标相对于目标对象的坐标{
	IE : offsetX & offsetY 
	w3c : layerX  & layerY (+border)
}