1、定位 元素尺寸 获取元素尺寸可以使用下面几种方式 元素的 style 属性 width， height，但这些属性往往返回空值，因为它们只能返回使用行内 style 属性定义在元素上的样式 元素的 currentStyle 属性 width， height（ IE），getComputedStyle(obj,null)返回对象的 width， height，这样可以获取元素的实际 CSS定义的宽度和高度，但当元素没有使用 CSS 定义外观时，虽然元素仍然有大小（只要其中有字符或其它元素），这些属性的返回值是不确定的，如 IE 返回 auto,而火狐则返回一个看似理想的值。 对象的 client
2、Width 和 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 属性返加对象内容的实际所需空间 ,当元素设置了o
6、verflow 值为 scroll 或 hidden 之类时 ,scrollWidth 和 scrollHeight属性就派上用场了 ,可惜的是它问题太多了 ) 综上所述，对于一个在 CSS中定义了大小的块级元素，获取它的实际大小是很简单的，但对于没有定义宽度和高度，或是一行内元素时，则没有跨浏览器的解决方案可以获取它的 实际大小！ 窗口视口宽度和高度 对于窗口视口（视口指显示页面的那部分）的大小， Mozilla 提供了window.innerWidth 与 window.innerHeight 两个属性，而 IE则没有相对应的属性，但可以使用 document.documentElemen
7、t.clientWidth 与document.documentElement.clientHeight 两个属性来获取！另外，对于 IE6之前的版本，则需要使用 document.body 的 clientWidth 与 clientHeight 属性！ /获 取视口大小，依次为火狐， IE6 及 IE6 以上的版本， IE6 以下的版本 var w = window.innerWidth | document.documentElement.clientWidth | document.body.clientWidth; var h = window.innerHeight | docum
8、ent.documentElement.clientHeight | document.body.clientHeight; /事实上， IE 版本低于 6 的浏览器几乎不存在了 /而同时其实火狐也支持通过 document.documentElement 的clientWidth,clientHeight 属性获取视口大小 /完全可以不做任何浏览器检测 w = document.documentElement.clientWidth; h = document.documentElement.clientHeight; 元素边框宽度 获取元素边框宽度可以使用下面几种方式 元素 style 属
9、性的 borderWidth，但同样它只能返回使用 HTML 行内 style属性定义的边框样式 使用 currentStyle 属性或 getComputedStyle 方法，可以获取元素 CSS定义的实际边框样式，如果 CSS没有定义元素的边框，一般的元素是没有边框的，但部分元素，如表单控件，仍然具有默认的边框宽度！对于此类情况，也是不能依靠这种方法来获取元素的边框大小的！ 对象的 clientLeft和 clientTop属性。不能不说 clientLeft和 clientTop的名字起的太奇怪了 ,事实上它们的名字更应该这样 :clientBorderLeftWidth 和 clien
10、tBorderTopWidth(难道是太长了的原因 ?);更奇怪的是 ,它们只能取得设置在元素上的左边框和上边框的粗细 ,而没有返回右边和下边的边框宽度的属性 !另外 ,对于文档根元素(documentElement),在 IE中它有默认的两像素边框宽度 ,而其它浏览器中报告为 0. 元素坐标 获取元素坐标方法： 元素 style属性的 left,top属性，不但这种方法仅适用于使用 HTML style属性声明样式的元素，并且只有当元素使用定位（ position 设置为relative,absolute,fixed,但不包含 static）时，才会存在这些值 元素 currentStyle
11、 属性或 getComputedStyle 方法返回的 Style 对象的left,top 属性，但这种方法仅对采用定位的元素有作用 元素的 offsetLeft 与 offsetTop 属性返回元素在页面中相对于父元素的坐标。一般对于进行了定位的元素（即 position 为不是 static 的值或没有设置），这两个属性的返回值为 CSS 中定义的元素的 left,top 值，当其自身有边距时（ margin），还会加上边距。而对于没有采用定位的元素则显得比较复杂，我们只能考虑下设置了宽度和高度的块级元素，因 为没有设置宽高，及行内元素，没有办法获取它的宽高，即使能获取它的 left，to
12、p 值也显得无意义了。对于没有采用定位的块级元素， offsetLeft 与offsetTop 属性将返回其自身的 margin+父元素的 padding。元素还有个offsetParent 属性返回元素的相对定位的父元素，当使用定位时，各个浏览器一致，并且和 CSS里设置的吻合，当不使用定位时，父元素是 WHO成了问题，各个浏览器认识不一样， IE报告为其父节点，而其它浏览器则报告为 body，当然，这次 IE正确了。另外，对于表格中的一些元素，不应对 其进行定位！ 具有滚动条时的定位 scrollLeft 和 scrollTop,它们用来获得那些具有滚动条的元素滚动条滚动的距离 ,而没有滚
13、动条的元素 ,它总返回 0.可以这样认为 ,这两个属性报告了有滚动条元素中未显示的左一部分的宽 (scrollLeft)和上一部分的高 (scrollTop).而对于页面的滚动条，则取 documentElement 的 scrollLeft 与 scrollTop 属性，但是对于谷歌浏览器，它会将页面的滚动条视为 document.body 的！ Event 对象与定位相关的属性 clientX 与 clientY 返回事件发生时鼠标在视口中的坐标； offsetX 与offsetY 返回事件发生时鼠标相对于目标对象的坐标，以目标对象右上角为坐标原点，而这两个属性的 W3C DOM 版本则为
14、 layerX 与 layerY； pageX 与 pageY 返回事件发生时鼠标相对于页面的坐标，虽然这个属性 IE不支持，但仍然有补救的余地！ /不要在每个事件处理函数中进行判断，而要善于利用之前的fixEvent 函数！ function fixEvent(evt) if (!evt.target) /函数中已有的部 分 evt.pageX = evt.clientX+document.documentElement.scrollLeft; evt.pageY = evt.clientY+document.documentElement.scrollTop; /可以将事件发生时鼠标在视口
15、中的坐标加上页面滚动的偏移量得出 pageX 与 pageY evt.layerX = evt.offsetX; evt.layerY = evt.offsetY; return evt; 拖动 最简单的拖动脚本 拖动的基本原理 window.onload = function () var oDiv = document.getElementById(“oDiv“);/oDiv 必须使用 CSS 定位 oDiv.onmousedown = drag; function drag(evt) evt = evt | window.event; this.onmouseup = drop; thi
16、s.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; ;
