1、定位元素尺寸获取元素尺寸可以使用下面几种方式 元素的 style 属性 width，height，但这些属性往往返回空值，因为它们只能返回使用行内 style 属性定义在元素上的样式 元素的 currentStyle 属性 width，height（IE），getComputedStyle(obj,null)返回对象的 width，height，这样可以获取元素的实际 CSS 定义的宽度和高度，但当元素没有使用 CSS 定义外观时，虽然元素仍然有大小（只要其中有字符或其它元素），这些属性的返回值是不确定的，如 IE 返回 auto,而火狐则返回一个看似理想的值。 对象的 clientWidth
2、 和 clientHeight 属性给出元素的可视部分的宽度和高度,当有滚动条时，只返回可见区域大小,对于块级元素,将返回元素的所设置的宽度和高度加上填充(padding)，这一点几乎所有浏览器都达成一致.但当块级元素并没有设置宽和高以及填充时,就出现不同了,谷歌浏览器和火狐浏览器的报告一致,IE 报告都为 0,而 Opera 则有所偏差.再将这两个属性应用到行内元素上,IE 和火狐都报告为 0,谷歌报告了一个看似理想的数字,而 Opera 竟会一个为正另一个负! 对象的 offsetWidth 和 offsetHeight 属性用来取得对象在页面中的实际所占区域大小(所设置的宽高加边框加填充
3、，当有滚动条时还会算上滚动条),似乎这个属性对于设置了宽和高的块级元素几乎没有什么浏览器兼容问题,但不得不说的是火狐的一个 BUG.火狐浏览器有个可将页面放大缩小的功能,当将页面缩小后,对象的 offsetWidth 和 offsetHeight 属性会发生细微的变化-变小几像素!尽管这对 JS 编程来讲几乎没影响,但似乎这个 BUG 也太明显了.这两个属性变非总是那么让人信任,当对象并没设置宽高或它是一个行内元素时,它的报告就显得相当复杂,不同浏览器都有自己一套标准(但是仍然可以肯定的是这两个属性报告的仍然是该元素占据的的空间大小,只不过会因字体和空格的默认大小不同而不同),最让人摸不着头脑
4、的是 Opera,对于一个 body 的子块级元素,当 body 和它自身没设置宽高时,Opera 报告的它的宽度相当大,6 千多像素! 还有就是 scrollWidth 和 scrollWidth 了,就目前来讲,对于一个没有滚动条和溢出的元素,其它浏览器对这个属性的报告还算有规律:对象的clientWidth+border=scrollWidth.对象的clientHeight+border=scrollHeight;只有 IE 报告有问题!它以元素中的内容为准,如果元素内没有其它内容,虽然 IE 并不会报 0,但会报告一个非常小的值!再看看当元素有滚动条时怎么样吧!唯一值得高兴的是,它们
5、对有滚动条的元素的 clientWidth 和 clientHeight 都报告一致(但仍有一点要注意,那就是火狐的一 BUG,页面缩放功能带来的郁闷,而且这次变化非常大).而对于 scrollWidth 和 scrollHeight 真是五花八门:先说好的,尽管各不一样,但它们对 scrollWidth 不知为什么,相差不大,那么坏的就是,scrollHeight 属性就相差太大了,没规律可循!(scrollWidth 和scrollHeight 属性返加对象内容的实际所需空间,当元素设置了overflow 值为 scroll 或 hidden 之类时,scrollWidth 和 scrol
6、lHeight属性就派上用场了,可惜的是它问题太多了) 综上所述，对于一个在 CSS 中定义了大小的块级元素，获取它的实际大小是很简单的，但对于没有定义宽度和高度，或是一行内元素时，则没有跨浏览器的解决方案可以获取它的实际大小！窗口视口宽度和高度对于窗口视口（视口指显示页面的那部分）的大小，Mozilla 提供了window.innerWidth 与 window.innerHeight 两个属性，而 IE 则没有相对应的属性，但可以使用 document.documentElement.clientWidth 与document.documentElement.clientHeight 两个
7、属性来获取！另外，对于 IE6之前的版本，则需要使用 document.body 的 clientWidth 与 clientHeight 属性！/获取视口大小，依次为火狐，IE6 及 IE6 以上的版本，IE6 以下的版本var w = window.innerWidth | document.documentElement.clientWidth | document.body.clientWidth;var h = window.innerHeight | document.documentElement.clientHeight | document.body.clientHeight
8、;/事实上， IE 版本低于 6 的浏览器几乎不存在了/而同时其实火狐也支持通过 document.documentElement 的clientWidth,clientHeight 属性获取视口大小/完全可以不做任何浏览器检测w = document.documentElement.clientWidth;h = document.documentElement.clientHeight;元素边框宽度获取元素边框宽度可以使用下面几种方式 元素 style 属性的 borderWidth，但同样它只能返回使用 HTML 行内style 属性定义的边框样式 使用 currentStyle 属性或
9、 getComputedStyle 方法，可以获取元素 CSS定义的实际边框样式，如果 CSS 没有定义元素的边框，一般的元素是没有边框的，但部分元素，如表单控件，仍然具有默认的边框宽度！对于此类情况，也是不能依靠这种方法来获取元素的边框大小的！ 对象的 clientLeft 和 clientTop 属性。不能不说 clientLeft 和clientTop 的名字起的太奇怪了,事实上它们的名字更应该这样:clientBorderLeftWidth 和 clientBorderTopWidth(难道是太长了的原因?);更奇怪的是,它们只能取得设置在元素上的左边框和上边框的粗细,而没有返回右边和
10、下边的边框宽度的属性!另外,对于文档根元素(documentElement),在 IE 中它有默认的两像素边框宽度,而其它浏览器中报告为 0. 元素坐标获取元素坐标方法： 元素 style 属性的 left,top 属性，不但这种方法仅适用于使用 HTML style 属性声明样式的元素，并且只有当元素使用定位（position 设置为 relative,absolute,fixed,但不包含 static）时，才会存在这些值 元素 currentStyle 属性或 getComputedStyle 方法返回的 Style 对象的left,top 属性，但这种方法仅对采用定位的元素有作用 元素
11、的 offsetLeft 与 offsetTop 属性返回元素在页面中相对于父元素的坐标。一般对于进行了定位的元素（即 position 为不是 static 的值或没有设置），这两个属性的返回值为 CSS 中定义的元素的 left,top 值，当其自身有边距时（margin），还会加上边距。而对于没有采用定位的元素则显得比较复杂，我们只能考虑下设置了宽度和高度的块级元素，因为没有设置宽高，及行内元素，没有办法获取它的宽高，即使能获取它的 left，top 值也显得无意义了。对于没有采用定位的块级元素，offsetLeft 与 offsetTop 属性将返回其自身的 margin+父元素的pa
12、dding。元素还有个 offsetParent 属性返回元素的相对定位的父元素，当使用定位时，各个浏览器一致，并且和 CSS 里设置的吻合，当不使用定位时，父元素是 WHO 成了问题，各个浏览器认识不一样，IE 报告为其父节点，而其它浏览器则报告为 body，当然，这次 IE 正确了。另外，对于表格中的一些元素，不应对其进行定位！ 具有滚动条时的定位scrollLeft 和 scrollTop,它们用来获得那些具有滚动条的元素滚动条滚动的距离,而没有滚动条的元素,它总返回 0.可以这样认为,这两个属性报告了有滚动条元素中未显示的左一部分的宽(scrollLeft)和上一部分的高(scroll
13、Top).而对于页面的滚动条，则取 documentElement 的 scrollLeft 与 scrollTop 属性，但是对于谷歌浏览器，它会将页面的滚动条视为 document.body 的！Event 对象与定位相关的属性clientX 与 clientY 返回事件发生时鼠标在视口中的坐标；offsetX 与offsetY 返回事件发生时鼠标相对于目标对象的坐标，以目标对象右上角为坐标原点，而这两个属性的 W3C DOM 版本则为 layerX 与 layerY；pageX 与 pageY返回事件发生时鼠标相对于页面的坐标，虽然这个属性 IE 不支持，但仍然有补救的余地！/不要在每个
14、事件处理函数中进行判断，而要善于利用之前的fixEvent 函数！function fixEvent(evt) if (!evt.target) /函数中已有的部分evt.pageX = evt.clientX+document.documentElement.scrollLeft;evt.pageY = evt.clientY+document.documentElement.scrollTop;/可以将事件发生时鼠标在视口中的坐标加上页面滚动的偏移量得出 pageX 与 pageYevt.layerX = evt.offsetX;evt.layerY = evt.offsetY;retur
15、n evt;拖动最简单的拖动脚本拖动的基本原理window.onload = function () var oDiv = document.getElementById(“oDiv“);/oDiv必须使用 CSS 定位oDiv.onmousedown = drag;function drag(evt) evt = evt | window.event;this.onmouseup = drop;this.onmousemove = moveDiv;this.offset = x:evt.offsetX | evt.layerX,y:evt.offsetY | evt.layerY;function moveDiv(evt) evt = evt | window.event;this.style.left = evt.clientX-this.offset.x+“px“;this.style.top = evt.clientY-this.offset.y+“px“;function drop(evt) this.onmouseup = null;this.onmousemove = null;
