Measuring Element Dimension and Location with CSSOM in Internet Explorer 9
来源:互联网 发布:数控编程指令代码 编辑:程序博客网 时间:2024/06/05 16:27
Measuring Element Dimension and Location with CSSOM in Internet Explorer 9
This topic is designed to help web developers understand how to access the dimension and location of elements on the page through the CSS Object Model (CSSOM) in Windows Internet Explorer 9.
Understanding Properties That Measure Element Dimension and Location
The following diagrams represent different CSSOM properties for the same page. The sample page contains a div red element that is relatively positioned on the page. The blue element is the red element's parent. Its primary purpose is to define the different Cascading Style Sheets (CSS) boxes that compose an element's layout, as well as to show how the offsetTop property is calculated. The viewport is the black outline, and is represented by the html element. In the diagrams, the html element is not shown with any margin or border. Adding a margin or border would not change any of the measurements, however.
Because the overflow attribute of the div has been set to scroll and it contains more content than can be displayed within its limited client area, scroll bars are displayed. Be aware that the values illustrated are all thevertical-oriented properties. The horizontal-oriented properties are similar; simply substitute "left" for "top", "width" for "height", and so on.
For more information about any of these properties, see Reference.
The following diagram illustrates vertical sizing and positioning values for the red element.
The following diagram illustrates vertical sizing and mouse coordinate positions that are affected by CSS transforms. Be aware that the offsetY coordinates are reported in the red element's original coordinate space (that is, as if the element were not transformed). This is in contrast to layerY, which is reported in the transformed coordinate space (that is, according to the dimensions of the bounding box).
The following diagram illustrates all vertical mouse coordinates and viewport offsets on an untransformed element. Be aware that, in Internet Explorer 9, when the page has been scrolled, the layerY value includes thewindow.pageYOffset amount in the value. This is incorrect behavior, and will be fixed in a future release.
Also, in this diagram, the viewport has been scrolled down such that there is additional content available "above" the viewport. This is designed to show that each property—pageY, clientY, layerY, and offsetY—corresponds to a different relative coordinate point when the document has been scrolled.
Finding an Element's Location Relative to the Page Origin
An element has convenient CSSOM properties to find its location relative to the element's offsetParent or the viewport. There is currently no CSSOM property to directly locate an element based on the page (document) origin (for instance, similar to the pageX/pageY properties for mouse events).
A common solution to find the element's location relative to the page involves summing the value of offsetTop with the element's offsetParent.offsetTop and so on until offsetParent returns null. (Naturally, offsetLeft is used for horizontal positioning.) Avoid this practice for the following reasons:
- The offsetTop value does not include the width of the offsetParent's border. This can lead to slight misalignments when any element in the offsetParent chain has a border style applied.
- These repeated summations can contribute to slow performance when offsetParent chains are long.
With Internet Explorer 9, it is better to use the newly added window.pageYOffset property (window.pageXOffset for horizontal scenarios). The recommended practice to find an element's vertical location from the page's origin is to add the element's getBoundingClientRect().top property to the window.pageYOffset value. (getBoundingClientRect().left + window.pageXOffset for the horizontal location.) This yields the correct result avoiding both pitfalls previously shown.
转自:http://msdn.microsoft.com/en-us/library/ms533024.aspx
- Measuring Element Dimension and Location with CSSOM in Internet Explorer 9
- Measuring Element Dimension and Location with CSSOM in Internet Explorer 9
- HTML5 Support in Internet Explorer 9
- IobjectSafety and Internet Explorer
- CSS Differences in Internet Explorer 6, 7 and 8
- OLE with the internet explorer
- Internet Explorer and column collapse
- Internet Explorer and Connection Limits
- icould bookmarks sync problem with Internet Explorer
- Using Windows Forms Controls in Internet Explorer
- Using Windows Forms Controls in Internet Explorer
- Using Windows Forms Controls in Internet Explorer
- Memory Leakage in Internet Explorer - revisited
- Using Windows Forms Controls in Internet Explorer
- Internet Explorer Style Information Bar in JavaScript
- Memory Leakage in Internet Explorer - revisited
- Understanding and Solving Internet Explorer Leak Patterns
- Understanding and Solving Internet Explorer Leak Patterns
- android 解析json数据格式
- Android APK的签名与重新签名
- 各种编码的由来(很通俗)
- 获取用户密码
- Struts 2.x 与 struts 1.x 比较
- Measuring Element Dimension and Location with CSSOM in Internet Explorer 9
- http://www.unc.edu/~shubin/
- label语句
- java中spring框架的依赖注入的简单实例
- 越早学会这些,你的编程之路越好走
- 建立主键应该遵循的原则
- WebBrowser 在当前窗体打开新的页面
- 选择微软,诺基亚不死
- 使用fieldset标签创建登录页面