IE Dimensions

最新推荐文章于 2021-02-16 15:40:05 发布

rootcn

最新推荐文章于 2021-02-16 15:40:05 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏：脚本语言文章标签： ie attributes object distance scroll html

本文链接：https://blog.youkuaiyun.com/rootcn/article/details/414596

脚本语言专栏收录该内容

13 篇文章

订阅专栏

博客围绕IE Dimensions展开，虽内容简短，但聚焦于IE相关尺寸方面的信息技术内容。

IE Dimensions

Internet Explorer (IE) dimensions as used in CSS and DHTML. IE 6 gave IE the option to render items as CSS compliant. See CSS Enhancements in Internet Explorer 6 [§].

Box Dimension Attributes

These are the usual CSS attributes that specify the dimensions of an object/element/content. These CSS Attributes have string values. These attributes can be scripted and can be used inline with HTML. There is a distinction between the size of the just the element and the size of the "box" (which includes the borders and margins).

object.style.padding. Transparent distance between the object and the inner edge of the border.
object.style.border. Thickness of the border surrounding the padding and the object.
object.style.margin. Transparent distance between the nearest object and the outer edge of the border. The margin attribute doesn't apply to the <body> tag (but IE still "applies" it to the left side) or to objects with the position attribute set to absolute.

Image illustrating the relationship between content, padding, borders, and margins.

In Internet Explorer, all elements have "layout" unless the element is inline and is neither absolutely positioned or has its height or width specified.

In non-compliant IE:

body was tied to the window and could not be resized.
body borders were rendered inside the window but outside the scroll bars since body could not have its own scrollbars.
body margins only apply to the left side while actually it was inside of the border.
Positioned items without a positioned parent took body as the parent.

In compliant IE:

body is within html and can be resized.
body borders are rendered inside the window and scroll bars but body could also have its own scrollbars.
body margins can be apply to all sides, outside of the border.
Positioned items without a positioned parent take html as the parent. The html tag cannot be referenced as document.all.html, you will have to reference the html tag by id. EG: Set <html id="oHtml">, and then use oHtml.clientHeight to get the height of the usable area of the browser window.

Read-Write Dimension Attributes

These are read-write attributes available when the position attribute is not set to the default of static.

These attributes can be scripted and can be used inline with HTML. These attributes have string values.
- Position of the specified edge of the object's box relative to the same box edge of the parent positioned object in the document hierarchy. The position style attribute must be set.
  - object.style.left. Distance of the object's left from the left of the next positioned object in the document hierarchy.
  - object.style.top. Distance of the object from the top of the next positioned object in the document hierarchy.
  - object.style.right. Distance of the object's right from the right of the next positioned object in the document hierarchy.
  - object.style.bottom. Distance of the object's bottom the bottom of the next positioned object in the document hierarchy.
- Size of the object (and not the box). Note for IE < 6 or for IE 6+ set to non-standards compliant, then these values included the padding and border.
  - object.style.height. Distance of the object's bottom from the object's top.
  - object.style.width. Distance of the object's right from the object's left.
These attributes are simply variations of the above. The difference is that although they can be scripted, they CANNOT be used inline with with HTML (since they are NOT CSS attributes), and they do NOT have string values.
- These attributes have integer values.
  - Position
    - object.style.pixelLeft.
    - object.style.pixelTop.
    - object.style.pixelRight.
    - object.style.pixelBottom.
  - Size
    - object.style.pixelHeight.
    - object.style.pixelWidth.
- These attributes have floating point values.
  - Position
    - object.style.posLeft.
    - object.style.posTop.
    - object.style.posRight.
    - object.style.posBottom.
  - Size
    - object.style.posHeight.
    - object.style.posWidth.

Read-Only Dimension Attributes

These are read-only attributes that can be scripted but cannot be used inline with HTML (since they are NOT CSS). These attributes are actually properties of the DHTML OM, i.e. the OM applied to Internet Explorer's HTML documents.

"offset" indicates relative to the offsetParent while including scrollbars.
- object.offsetParent. Reference to the positioning parent of the object.
  - Non-compliant IE:
    - For objects without out a specific positioning parent, this is body.
    - For a td, this is tr.
  - Compliant IE:
    - For objects without out a specific positioning parent, this is html.
    - For a td, this is table.
- Position
  - object.offsetLeft. Distance between the left most of an object/box and the left of its parent object.
  - object.offsetTop. Distance between the top most of an object/box and the top of its parent object.
- Size. object + padding + border + scroll bar.
  - object.offsetHeight.
  - object.offsetWidth.
client.
- Position
  - object.clientLeft. Distance between the offsetLeft and the practical left of the object/box (object + padding). This is equal to border-left if there is one.
  - object.clientTop. Distance between the offsetTop and the practical top of the object/box (object + padding). This is equal to border-top if there is one.
- Size. offset - scrollbar = object + padding + border. EG: document.body.clientHeight.
  - object.clientHeight.
  - object.clientWidth.

Here is an image borrowed directly from MSDN. Personally I think it's all screwed up.

This image, also borrowed from MSDN, clearly shows how the old IE was not CSS compliant before and how IE 6+ (with the !DOCTYPE switch thrown) correctly follows CSS.

zMisc Attributes

Scrolling
- object.style.overflow. Read/Write. CSS for how an object utilizes scroll bars. For compliant IE, this also applies to html. The possible values are:
  - visible. The default. Content is not clipped and no scroll bars are allowed. This usually enlarges the object as needed.
  - scroll. Content can be clipped and scroll bars are always added.
  - hidden. Content can be clipped and no scroll bars are allowed.
  - auto. Content can be clipped and scroll bars are added as needed.
- object.style.overflowX and object.style.overflowY. Read/Write. Just like overflow except that it pertains to a single axis.
- object.scroll. Read/Write. Sets or retrieves how an object utilizes scroll bars. For non-compliant IE, this applied to body. For compliant IE, this applies to body and html. The possible values are:
  - yes (default)
  - no
  - auto
- object.scrollHeight and object.scrollWidth. Read only. The size of the content plus padding, esp. when the content is only partially shown because of scrolling.
- object.scrollLeft and object.scrollTop. Read/Write. Sets or retrieves the distance between the edge of the object and the corresponding shown edge. EG: If a div has scroll bars, and you scroll to the right, then how many pixels has content of the div moved to the left?
Mouse position. Most of these are integers indicating pixels.
- event.offsetX and event.offsetY. Read/Write. Sets or retrieves the coordinate of the mouse pointer's position relative to the object firing the event.
- event.clientX and event.clientY. Read/Write. Sets or retrieves the coordinate of the mouse pointer's position relative to the client area of the window, excluding window decorations and scroll bars.
- event.screenX and event.screenY. Read/Write. Retrieves the coordinate of the mouse pointer's position relative to the user's screen.
- window.screenLeft and window.screenTop. Read only. Retrieves the coordinate of the upper left-hand corner of the browser's client area, relative to the upper left-hand corner of the screen. The client area consists of the browser window, exclusive of the caption bar, the window-sizing border, the menu bar, the toolbars, the scroll bars, and the status bars.
- event.x and event.y. Read/Write. Sets or retrieves the x-coordinate, in pixels, of the mouse pointer's position relative to a relatively positioned parent element.
screen. The screen object provides some nice members.
- screen.height and screen.width. The resolution of the physical screen in pixels.
- screen.availHeight and screen.availWidth. The resolution of the physical screen excluding the MS Windows taskbar.
zMisc
- object.style.zIndex. Read/Write. Sets or retrieves the stacking order of positioned objects. auto by default. Greater integers mean indicate more on top.