HTML元素坐标定位.docxVIP

　HTML元素坐标定位，这些知识点得掌握文档坐标和视口坐标　视口坐标是相对于窗口的坐标，而文档坐标是相对于整个文档而言。例如，在文档坐标中如果一个元素的相对于文档的Y坐标是200px，并且用户已经把浏览器向下滚动了75px，那么视口坐标中元素的Y坐标为200px – 75px = 125px。　如何获取浏览器滚动条的位置?Window对象的pageXOffset和pageYOffset属性在所有浏览器中提供这些值，除IE8以及更早的版本。IE和所有现代浏览器也可以通过scrollLeft和scrollTop属性获取滚动条位置。　下面代码的getScrollOffsets方法获取滚动条位置：01//以一个对象的x和y属性放回滚动条的位置02function?getScrollOffsets(w){03?w = w || window;04?//除了IE 8以及更早的版本以外，其他浏览器都支持05?if(w.pageXOffset != null)?return?{x: w.pageXOffset, y: w.pageYOffset};06?//对标准模式下的IE07?var?d = w.document;08?if(patMode ==?CSS1Compat)09?return?{x: d.documentElement.scrollLeft, y: d.documentElement.scrollTop};10?//对怪异模式下的浏览器11?return?{ x: d.body.scrollLeft, y: d.body.scrollTop};12}　有时候能够判定视口的尺寸也是非常有用的，下面的代码简便地查询视口尺寸：01//作为一个对象的w和h属性返回视口的尺寸02function?getViewportSize(w){03?//使用指定的窗口， 如果不带参数则使用当前窗口04?w = w || window;05?06?//除了IE8及更早的版本以外，其他浏览器都能用07?if(w.innerWidth != null)08?return?{w: w.innerWidth, h: w.innerHeight};09?10?//对标准模式下的IE（或任意浏览器）11?var?d = w.document;12?if(patMode ==?CSS1Compat)13?return?{w: d.documentElement.clientWidth, h: d.documentElement.clientHeight};14?15?//对怪异模式下的浏览器16?return?{w: d.body.clientWidth, h: d.body.clientHeight};17}　上面的两个例子已经使用到scrollLeft、scrollTop、clientWidth、clientHeight。 scrollLeft和scrollTop获取滚动条位置，而clientWidth和clientHeight获取对象的尺寸。　查询元素的几何尺寸　判定一个元素的尺寸和位置最简单的方法是调用它的getBoundingClientRect()方法。该方法是在IE5中引入的，而现在当前的所有浏览器都实现了。它不需要参数，返回left、right、top、bottom属性的对象。　这个方法返回元素在视口坐标中的位置。为了转换为甚至用户滚动浏览器窗口以后任然有效的文档坐标，需要加上滚动偏移量：1//元素相对于文档的坐标位置2function?getElementRect(e){3?var?box = e.getBoundingClientRect();4?var?offsets = getScrollOffsets();5?var?x = box.left + offsets.x;6?var?y = box.top + offsets.y;7?8?return?{x:x, y: y};9}　在很多浏览器中，getBoundingClientRect()返回的对象还包括width和height属性。但在原始的IE中未实现。可以这样计算元素的width和height：1//元素尺寸2function?getElementSize(e){3?var?box = getElementRect(e);4?var?w = box.width || box.right - box.left;5?var?h = box.height || box.bottom - box.top;6?7?return?{w: w, h: h};8}　滚动元素　之前的getScrollOffsets方法可以查询滚动条的位置。该例子的scrollLeft和scrollTop属性可以用来