HTML元素坐标定位

《HTML元素坐标定位》由会员分享，可在线阅读，更多相关《HTML元素坐标定位（12页珍藏版）》请在装配图网上搜索。

1、HTML元素坐标定位，这些知识点得掌握文档坐标和视口坐标视口坐标是相对于窗口的坐标，而文档坐标是相对于整个文档而言。例如，在文档坐标中如 果一个元素的相对于文档的Y坐标是200px ,并且用户已经把浏览器向下滚动了 75px ,那么视 口坐标中元素的Y坐标为200px - 75px = 125px。如何获取浏览器滚动条的位置?Window对象的pageXOffset和pageYOffset属性在所有 浏览器中提供这些值，除IE8以及更早的版本。IE和所有现代浏览器也可以通过scrollLeft和 scrollTop属性获取滚动条位置。下面代码的getScrollOffsets方法获取滚动条位置

2、：01/以一个对象的x和y属性放回滚动条的位置02 function getScrollOffsets(w)(03w = w | window;04除了 IE 8以及更早的版本以外，其他浏览器都支持Oif(w.pageXOffset != null) return (x: w.pageXOffset, y:w.pageYOffset);06/对标准模式下的IE07var d = w.document;08if(patMode = CSSICompat)mreturn (x: d.documentElement.scrollLeft, y:09d.documentElement.scrollTo

3、p;10 对怪异模式下的浏览器11 return ( x: d.body.scrollLeft, y: d.body.scrollTop;12有时候能够判定视口的尺寸也是非常有用的，下面的代码简便地查询视口尺寸：01/作为一个对象的w和h属性返回视口的尺寸02 function getViewportSize(w)(03使用指定的窗口，如果不带参数则使用当前窗口0506除了 IE8及更早的版本以外，其他浏览器都能用07if(w.innerWidth != null)08return (w: w.innerWidth, h: w.innerHeight);0910 对标准模式下的IE (或任意浏

4、览器)11 var d = w.document;12 if(patMode = CSSICompat)13 return (w: d.documentElement.clientWidth, h: d.documentElement.clientHeight;1415 对怪异模式下的浏览器16 return (w: d.body.clientWidth, h: d.body.clientHeight; 17上面的两个例子已经使用到scrollLeft、scrollTop、clientwidth、 clientHeight。scrollLeft 和 scrollTop 获取滚动条位置，而 cl

5、ientwidth 和 clientHeight获取对象的尺寸。查询元素的几何尺寸判定一个元素的尺寸和位置最简单的方法是调用它的getBoundingClientRect()方法。该方 法是在IE5中引入的，而现在当前的所有浏览器都实现了。它不需要参数，返回left、right、top、 bottom属性的对象。这个方法返回元素在视口坐标中的位置。为了转换为甚至用户滚动浏览器窗口以后任然有效 的文档坐标，需要加上滚动偏移量：1/元素相对于文档的坐标位置2 function getElementRect(e)(34var box = e.getBoundingClientRect();var o

6、ffsets = getScrollOffsets();56789var x = box.left + offsets.x;var y = box.top + offsets.y;return (x:x, y: y;在很多浏览器中，getBoundingClientRect()返回的对象还包括width和height属性。但在原始的IE中未实现。可以这样计算元素的width和height :1 /元素尺寸2 function getElementSize(e)34var box = getElementRect(e);var w = box.width | box.right - box.le

7、ft;56var h = box.height | box.bottom - box.top;78return (w: w, h: h;滚动元素之前的getScrollOffsets方法可以查询滚动条的位置。该例子的scrollLeft和scrollTop属 性可以用来设置让浏览器滚动，但有一种更简单的方法从Javascript最早时期开始支持的。 Window对象的scrollTop()方法接口一个点的X和Y坐标(文档坐标)，并作为滚动条的偏移量 设置它们。下面代码滚动浏览器到文档最下面的页面可见：1/滚动到浏览器最底部2 function scrollToBottom()(3 获取文档和视

8、口的高度4 var documentHeight = document.documentElement.offsetHeight;5 var viewportHeight = window.innerHeight; 或使用上面的getViewPortSize()方法67 然后，滚动让最后一页在视口中可见8 window.scrollTo(0, documentHeight - viewportHeight); 9Window的scrollBy方法和scroll()和scrollTo()类似，但是它的参数是相对的，并在当前 滚动条的偏移量上增加。例如，快速阅读者可能会喜欢这样：1 javascr

9、ipt:voidsetInterval(function()scrollBy(0, 10), 200);如果想让某个元素在文档中可见，可以利用getBoundingClientRect()计算元素的位置，并 转换为文档坐标，然后使用scrollTo()方法达到目的。但在需要显示Html元素上调用 scrollIntoView()方法更方便。scrollIntoView()的行为与设置window.location.hash为一个命名锚点的名字后浏览器产 生的行为类似。元素尺寸、位置和溢出任何HTML元素的只读属性offsetWidth和offsetHeight以CSS像素返回它的屏幕尺寸。 返

10、回的尺寸包含元素的边框和内边距，除去了夕卜边距。所有HTML元素拥有offsetLeft和offsetTop属性来返回元素的X和Y坐标。这些值是文 档坐标，并直接指定元素的位置。当对于已定位元素的后代元素和一些其他元素，这些属性返回 的坐标是相对于祖先元素的而非文档。offsetParent属性指定这些属性所相对的父元素。如果offsetParent为null ,这些属性都 是文档坐标，因此，一般来说，用offsetLeft和offsetTop来计算元素e的位置需要一个循环： 01/计算元素位置02 function getElementPosition(e)(03var x = 0, y =

11、 0;04while(e != null)(05x += e.offsetLeft;06y += e.offsetTop;07e = e.offsetParent08)0910return (x: x, y: y );11)getElementPosition函数也不总是计算正确的值，下面看如何修复它。除了这些名字以offset开头的属性以外，所有的文档元素定义了其他两组属性，名字一组以client开头，另一 组以scroll开头。即每个元素都有以下这些属性：offsetwidthclientwidthscrollwidthoffsetHeightclientHeightcrollHeight

12、offsetLeftclientLeftscrollLeftoffsetTopclientTopscrollTopoffsetParent为了理解client和scroll属性，你需要知道元素的实际内容可能比分配用来容纳的盒子更大，因此单个元素可能有滚动条。内容区域是视口，就像浏览器窗口，当实际内容比视口大，需 要把元素滚动套位置考虑进去。clientwidth 和 clientHeight 类似 offsetwidth 和 offsetHeight，区别在于它们不包含边 框大小。只包含内容和内边距。同时如果浏览器在内边距和边框之间添加了滚动条，clientwidth 和clientHeigh

13、t不包含滚动条尺寸。在文档的根元素上查询这些属性时，它们的返回值和窗口 的 innerWidth 和 innerHeight 属性值相等。clientLeft和clientTop属性没什么用：它们返回元素的内边距的夕卜边框和它的边框的夕卜边 缘之间的水平距离和垂直距离。scrollWidth和scrollHeight是元素的内容区域加上它的内边距再加上任何溢出内容的尺寸。当内容正好和内容区域匹配没溢出时，这些属性与clientwidth和clientHeight相等。有 溢出时，包含了溢出的内容尺寸。scollLeft和scrollTop指定元素滚动条的位置。在getScrollOffsets

14、()方法中查询过它们。 注意，scrollLeft和scrollTop是可写的，通过设置它们来让元素中的内容滚动(HTML元素并没 有类似Window对象的scrollTo()方法。DEMO下面代码介绍了前面几个函数的使用：001 002 003004005006007008009010Title/以一个对象的x和y属性放回滚动条的位置function getScrollOffsets(w)w = w | window;除了 IE 8以及更早的版本以外，其他浏览器都支持011null) return012x:013014= CSS1Compat )if(w.pageXOffset != w.p

15、ageXOffset, y: w.pageYOffset;对标准模式下的IEvar d = w.document;if(patModeslreturn x:015d.documentElement.scrollLeft, y: d.documentElement.scrollTop;016对冠以模式下的浏览器017018019020021022023024025026027028029030031032033034035036037038039040041042043044return ( x: d.body.scrollLeft, y: d.body.scrollTop;/作为一个对象的w和

16、h属性返回视口的尺寸 function getViewportSize(w)使用指定的窗口，如果不带参数则 使用当前窗口w = w | window;除了 IE8及更早的版本以外，其他浏 览器都能用if(w.innerWidth != null)return (w: w.innerWidth, h: w.innerHeight;对标准模式下的IE (或任意浏览器) var d = w.document; if(patMode= CSS1Compat) return (w: d.documentElement.clientWidth, h: d.documentElement.clientHei

17、ght;对怪异模式下的浏览器 return (w: d.body.clientWidth, h:d. body.clientHeight;/元素相对于文档的坐标位置function getElementRect(e)( var box =e. getBoundingClientRect();var offsets = getScrollOffsets(); var x = box.left + offsets.x;var y = box.top + offsets.y;045returnx:x, y: y;04604704804905005105205305405505605705805906

18、0061062063064065066067068069070071072073074075076077元素尺寸function getElementSize(e) var box = getElementRect(e);var w = box.width | box.right - box.left;var h = box.height | box.bottom - box.top;return (w: w, h: h;/滚动到浏览器最底部 function scrollToBottom()(/获取文档和视口的高度 var documentHeight = document.document

19、Element.offsetHeight;var viewportHeight = window.innerHeight; 或使用上面的 getViewPortSize ()方法/然后，滚动让最后一页在视口中可见 window.scrollTo(0, documentHeight -viewportHeight);/计算元素位置function getElementPosition(e)( var x = 0, y = 0;while(e != null)(x += e.offsetLeft; y += e.offsetTop;e = e.offsetParent;return (x: x,

20、y: y ; 078079080081082083084085086087088089090091092093094095096097098099100101102103104105106107108109button id=scrolltoBottomBtn 滚动到浏览器 获取滚动条位置 获取视口尺寸 元素文档坐标 var btn = document.getElementById(btn); btn.onclick = function(event)( console.log(getScrollOffsets();var viewportBtn = document.getElementB

21、yId(viewportBtn);viewportBtn.onclick = function(event)( console.log(getViewportSize();var eleRectBtn = document.getElementById(eleRectBtn);eleRectBtn.onclick = function(eevent)( console.log(getElementRect(this);var scrolltoBottomBtn = document.getElementById(scrolltoBottomBtn);scrolltoBottomBtn.onclick = function()( scrollToBottom();110