Javascript开发之十 定位

• 元素的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千多像素!
• 还有就是scrollWidth和scrollWidth了,就目前来讲,对于一个没有滚动条和溢出的元素,其它浏览器对这个属性的报告还算 有规律:对象的clientWidth+border=scrollWidth.对象的 clientHeight+border=scrollHeight;只有IE报告有问题!它以元素中的内容为准,如果元素内没有其它内容,虽然IE并不 会报0,但会报告一个非常小的值!再看看当元素有滚动条时怎么样吧!唯一值得高兴的是,它们对有滚动条的元素的clientWidth和 clientHeight都报告一致(但仍有一点要注意,那就是火狐的一BUG,页面缩放功能带来的郁闷,而且这次变化非常大).而对于 scrollWidth和scrollHeight真是五花八门:先说好的,尽管各不一样,但它们对scrollWidth不知为什么,相差不大,那么坏 的就是,scrollHeight属性就相差太大了,没规律可循!(scrollWidth和scrollHeight属性返加对象内容的实际所需空间, 当元素设置了overflow值为scroll或hidden之类时,scrollWidth和scrollHeight属性就派上用场了,可惜的是它问 题太多了)