前端进阶-Position
1.跟定位相關的屬性
width //這幾個就不多講了
height
left
top
offsetWidth //網頁寬度
offsetHeight? //網頁高度
offsetLeft //相對父元素的左偏移，不同瀏覽器計算方式不一樣
offsetTop???? //相對父元素的右偏移
clientWidth??? //document.documentElement.clientWidth 網頁寬度，也就是滾動條中可拖動的條子的長度
clientHeight?? //網頁的高度(包含滾動條的高)
clientLeft // border-left-width左邊框的寬度
clientTop // border-top-width上邊框的高度
scrollLeft //滾動條向右拉動的距離
scrollTop //滾動條向下拉動的距離
scrollWidth? //滾動條的長度 scrollWidth = scrollLeft + clientWidth
scrollHeight //滾動條的高度
pageX(clientX) //相對網頁視窗的x; pageX是w3c規范屬性
pageY(clientY) //相對網頁視窗的y
layerX(offsetX) //事件源對象相對目標的x; layerX是w3c的規范屬性
layerY(offsetY) //事件源對象相對目標的y
1.1 w3c 文檔定義
The clientTop, clientLeft, clientWidth, and clientHeight attributesThe clientTop, clientLeft, clientWidth, and clientHeight attributes must return zero if the element does not have any associated CSS layout box or if the CSS layout box is inline. Otherwise, these attributes must behave as defined in the remainder of this section.The clientTop attribute returns the computed value of the 'border-top-width' property plus the width of any scrollbar rendered between the top padding edge and the top border edge.The clientLeft attribute returns the computed value of the 'border-left-width' property plus the width of any scrollbar rendered between the left padding edge and the left border edge.The clientWidth attribute returns the viewport width excluding the size of a rendered scroll bar (if any) if the element is the root element and the width of the padding edge (excluding the width of any rendered scrollbar between the padding edge and the border edge) otherwise.The clientHeight attribute returns the viewport height excluding the size of a rendered scroll bar (if any) if the element is the root element and the height of the padding edge (excluding the width of any rendered scrollbar between the padding edge and the border edge) otherwise.The offsetParent, offsetTop, offsetLeft, offsetWidth, and offsetHeight attributes
The offsetParent attribute must return the result of running these steps:
If any of the following holds true return null and terminate this algorithm:
- The element does not have an associated CSS layout box.
- The element is the root element.
- The element is the HTML body element.
- The element's computed value of the 'position' property is fixed.
Return the nearest ancestor element of the element for which at least one of the following is true and terminate this algorithm if such an ancestor is found:
- The computed value of the 'position' property is not static.
- It is the HTML body element.
- The computed value of the 'position' property of the element is static and the ancestor is one of the following HTML elements: td, th, or table.
Return null.
The offsetTop attribute must return the result of running these steps:
If the element is the HTML body element or does not have any associated CSS layout box return zero and terminate this algorithm.
If the offsetParent of the element is null return the y-coordinate of the top border edge of the first CSS layout box associated with the element, relative to the initial containing block origin, and terminate this algorithm.
Return the result of subtracting the y-coordinate of the top padding edge of the first CSS layout box associated with the offsetParent of the element from the y-coordinate of the top border edge of the first CSS layout box associated with the element, relative to the initial containing block origin.
An inline element that consists of multiple line boxes will only have its first CSS layout box considered.
The offsetLeft attribute must return the result of running these steps:
If the element is the HTML body element or does not have any associated CSS layout box return zero and terminate this algorithm.
If the offsetParent of the element is null return the x-coordinate of the left border edge of the first CSS layout box associated with the element, relative to the initial containing block origin, and terminate this algorithm.
Return the result of subtracting the x-coordinate of the left padding edge of the first CSS layout box associated with the offsetParent of the element from the x-coordinate of the left border edge of the first CSS layout box associated with the element, relative to the initial containing block origin.
The offsetWidth attribute must return the result of running these steps:
If the element does not have any associated CSS layout box return zero and terminate this algorithm.
Return the border edge width of the first CSS layout box associated with the element.
The offsetHeight attribute must return the result of running these steps:
If the element does not have any associated CSS layout box return zero and terminate this algorithm.
Return the border edge height of the first CSS layout box associated with the element.
?
The scrollTop attribute must return the result of running these steps:
If the element does not have any associated CSS layout box or the element is the root element and the Document is in quirks mode return zero and terminate these steps.
If the element is the root element return the value of scrollY.
If the element is the HTML body element, the Document is in quirks mode, and the element does not have any overflow, return the value of scrollY.
Return the y-coordinate of the content at the alignment point with the top of the content edge of the element.
When setting the scrollTop attribute these steps must be run:
Let y be the given value.
If the element does not have any associated CSS layout box, the element is the root element and the Document is in quirks mode, or the element has no overflow, terminate these steps.
If the element is the root element invoke scroll() with zero as first argument and y as second.
If the element is the HTML body element, the Document is in quirks mode, and the element does not have any vertical overflow, invoke scroll() with scrollX as first argument and y as second.
Scroll the element to scrollLeft,y.
The scrollLeft attribute must return the result of running these steps:
If the element does not have any associated CSS layout box or the element is the root element and the Document is in quirks mode return zero and terminate these steps.
If the element is the root element return the value of scrollX.
If the element is the HTML body element, the Document is in quirks mode, and the element does not have any overflow, return the value of scrollX.
Return the x-coordinate of the content at the alignment point with the left of the content edge of the element.
When setting the scrollLeft attribute these steps must be run:
Let x be the given value.
If the element does not have any associated CSS layout box, the element is the root element and the Document is in quirks mode, or the element has no overflow, terminate these steps.
If the element is the root element invoke scroll() with x as first argument and zero as second.
If the element is the HTML body element, the Document is in quirks mode, and the element does not have any vertical overflow, invoke scroll() with x as first argument and scrollY as second.
Scroll the element to x,scrollTop.
The scrollWidth attribute must return the result of running these steps:
If the element does not have any associated CSS layout box return zero and terminate these steps.
If the element is the root element and the Document is not in quirks mode return max(document content width, value of innerWidth).
If the element is the HTML body element and the Document is in quirks mode return max(document content width, value of innerWidth).
Return the computed value of the 'padding-left' property, plus the computed value of the 'padding-right', plus the content width of the element.
The scrollHeight attribute must return the result of running these steps:
If the element does not have any associated CSS layout box return zero and terminate these steps.
If the element is the root element and the Document is not in quirks mode return max(document content height, value of innerHeight).
If the element is the HTML body element and the Document is in quirks mode return max(document content height, value of innerHeight).
Return the computed value of the 'padding-top' property, plus the computed value of the 'padding-bottom', plus the content height of the element.
?
The screenX attribute must return the x-coordinate of the position where the event occurred relative to the origin of the screen.
The screenY attribute must return the y-coordinate of the position where the event occurred relative to the origin of the screen.
The pageX attribute must return the horizontal coordinate of the position where the event occurred relative to the origin of the initial containing block.
The pageY attribute must return the y-coordinate of the position where the event occurred relative to the origin of the initial containing block.
The clientX attribute must return the x-coordinate of the position where the event occurred relative to the origin of the viewport.
The clientY attribute must return the y-coordinate of the position where the event occurred relative to the origin of the viewport.
The x attribute must return the value of clientX.
The y attribute must return the value of clientY.
?
?
2.詳解各屬性
width和height:
元素的currentStyle屬性width，height（IE），getComputedStyle(obj,null)返回對象的 width，height，這樣可以獲取元素的實際CSS定義的寬度和高度，但當元素沒有使用CSS定義外觀時，雖然元素仍然有大小（只要其中有字符或其 它元素），這些屬性的返回值是不確定的，如IE返回auto,而火狐則返回一個看似理想的值。
窗口寬度和高度:
//Mozilla提供了window.innerWidth與window.innerHeight兩個屬性//而IE則沒有相對應的屬性,但可以使用document.documentElement.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 || document.documentElement.clientHeight || document.body.clientHeight;//事實上，IE版本低于6的瀏覽器幾乎不存在了//而同時其實火狐也支持通過document.documentElement的clientWidth,clientHeight屬性獲取視口大小//完全可以不做任何瀏覽器檢測w = document.documentElement.clientWidth;h = document.documentElement.clientHeight;
offsetLeft和offsetTop:
元素的offsetLeft與offsetTop屬性返回元素在頁面中相對于父元素的坐標。一般對于進行了定位的元素（即position為不是 static的值或沒有設置），這兩個屬性的返回值為CSS中定義的元素的left,top值，當其自身有邊距時（margin），還會加上邊距。而對于 沒有采用定位的元素則顯得比較復雜，我們只能考慮下設置了寬度和高度的塊級元素，因為沒有設置寬高，及行內元素，沒有辦法獲取它的寬高，即使能獲取它的 left，top值也顯得無意義了。對于沒有采用定位的塊級元素，offsetLeft與offsetTop屬性將返回其自身的margin+父元素的 padding。元素還有個offsetParent屬性返回元素的相對定位的父元素，當使用定位時，各個瀏覽器一致，并且和CSS里設置的吻合，當不使 用定位時，父元素是WHO成了問題，各個瀏覽器認識不一樣，IE報告為其父節點，而其它瀏覽器則報告為body，當然，這次IE正確了。另外，對于表格中 的一些元素，不應對其進行定位！
offsetLeft=(offsetParent的padding-left)+(中間元素的offsetWidth)+(當前元素的margin-left)。
在IE8/9/10及Chrome中，offsetLeft = (body的margin-left)+(body的border-width)+(body的padding-left)+(當前元素的margin-left)。
在FireFox中，offsetLeft = (body的margin-left)+(body的padding-left)+(當前元素的margin-left)。
?
scrollLeft和scrollTop:
scrollLeft和scrollTop,它們用來獲得那些具有滾動條的元素滾動條滾動的距離,而沒有滾動條的元素,它總返回0.可以這樣認為,這兩個 屬性報告了有滾動條元素中未顯示的左一部分的寬(scrollLeft)和上一部分的高(scrollTop).而對于頁面的滾動條，則取 documentElement的scrollLeft與scrollTop屬性，但是對于谷歌瀏覽器，它會將頁面的滾動條視為 document.body的
area.scrollTop=area.scrollHeight; //可以通過設置scrollLeft和scrollTop定位滾動條,代碼為將滾動條定位到最底部
?
pageX和layerX:
?
3.容器高度
1.窗口高度，$(window).height()
2.文檔高度，$(document).height()
3.被卷起的高度，$(window).scrollTop()
轉載于:https://www.cnblogs.com/BigIdiot/archive/2012/09/20/2695775.html
總結
以上是生活随笔為你收集整理的前端进阶-Position的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 点击编辑的时候如何绑定DropDownL
- 下一篇： 匿名函数 闭包 ( 7 章 )