前端进阶-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 attributes



The 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:

1. 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.

2. 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.

3. Return null.

The offsetTop attribute must return the result of running these steps:

1. If the element is the HTML body element or does not have any associated CSS layout box return zero and terminate this algorithm.

2. 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.

3. 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:

1. If the element is the HTML body element or does not have any associated CSS layout box return zero and terminate this algorithm.

2. 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.

3. 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:

1. If the element does not have any associated CSS layout box return zero and terminate this algorithm.

2. 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:

1. If the element does not have any associated CSS layout box return zero and terminate this algorithm.

2. 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:

1. 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.

2. If the element is the root element return the value of scrollY.

3. 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.

4. 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:

1. Let y be the given value.

2. 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.

3. If the element is the root element invoke scroll() with zero as first argument and y as second.

4. 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.

5. Scroll the element to scrollLeft,y.

The scrollLeft attribute must return the result of running these steps:

1. 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.

2. If the element is the root element return the value of scrollX.

3. 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.

4. 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:

1. Let x be the given value.

2. 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.

3. If the element is the root element invoke scroll() with x as first argument and zero as second.

4. 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.

5. Scroll the element to x,scrollTop.

The scrollWidth attribute must return the result of running these steps:

1. If the element does not have any associated CSS layout box return zero and terminate these steps.

2. If the element is the root element and the Document is not in quirks mode return max(document content width, value of innerWidth).

3. If the element is the HTML body element and the Document is in quirks mode return max(document content width, value of innerWidth).

4. 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:

1. If the element does not have any associated CSS layout box return zero and terminate these steps.

2. If the element is the root element and the Document is not in quirks mode return max(document content height, value of innerHeight).

3. If the element is the HTML body element and the Document is in quirks mode return max(document content height, value of innerHeight).

4. 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:
　　

//clientX与clientY返回事件发生时鼠标在视口中的坐标；

//offsetX与offsetY返回事件发生时鼠标相对于目标对象的坐标，以目标对象右上角为坐标原点

//而这两个属性的W3C DOM版本则为layerX与layerY；pageX与pageY返回事件发生时鼠标相对于页面的坐标，虽然这个属性IE不支持，但仍然有补救的余地！



    function fixEvent(evt) {

        if (!evt.target) {

            //函数中已有的部分

            evt.pageX = evt.clientX+document.documentElement.scrollLeft;

            evt.pageY = evt.clientY+document.documentElement.scrollTop;

            //可以将事件发生时鼠标在视口中的坐标加上页面滚动的偏移量得出pageX与pageY

            evt.layerX = evt.offsetX;

            evt.layerY = evt.offsetY;

        }

        return evt;

    }

 

3.容器高度

　　1.窗口高度，$(window).height()

　　2.文档高度，$(document).height()

　　3.被卷起的高度，$(window).scrollTop()