cssom.view.ElementView

	Property	Defined By
		CSSOM View clientHeight : Number [read-only] Returns the inner height of an element in pixels, including padding but not the horizontal scrollbar height, border, or margin.	ElementView
		CSSOM View clientLeft : Number [read-only] The width of the left border of an element in pixels.	ElementView
		CSSOM View clientTop : Number [read-only] The width of the top border of an element in pixels.	ElementView
		CSSOM View clientWidth : Number [read-only] Returns the inner width of an element in pixels.	ElementView
		CSSOM View offsetHeight : Number [read-only] Height of an element relative to the element's offsetParent.	ElementView
		CSSOM View offsetLeft : Number [read-only] Returns the number of pixels that the upper left corner of the current element is offset to the left within the offsetParent node.	ElementView
		CSSOM View offsetParent : Element [read-only] The element from which all offset calculations are currently computed.	ElementView
		CSSOM View offsetTop : Number [read-only] Returns the distance of the current element relative to the top of the offsetParent node.	ElementView
		CSSOM View offsetWidth : Number [read-only] The width of an element, relative to the layout.	ElementView
		CSSOM View scrollHeight : Number [read-only] Height of the scroll view of an element; it includes the element padding but not its margin.	ElementView
		CSSOM View scrollLeft : Number Gets or sets the number of pixels that an element's content is scrolled to the left.	ElementView
		CSSOM View scrollTop : Number Gets or sets the number of pixels that the content of an element is scrolled upward.	ElementView
		CSSOM View scrollWidth : Number [read-only] Returns either the width in pixels of the content of an element or the width of the element itself, whichever is greater.	ElementView

	Method	Defined By
		CSSOM View getBoundingClientRect():TextRectangle Retrieves an object that specifies the bounds of a collection of TextRectangle objects.	ElementView
		CSSOM View getClientRects():TextRectangleList Retrieves a collection of rectangles that describes the layout of the contents of an object or range within the client.	ElementView

Property Detail

CSSOM View clientHeight

property

clientHeight:Number [read-only]

Product Versions :

5.5

6.0

7.0

8.0 as IE7

8.0 as IE8

2.0

3.0

3.1b

3.0

3.1

4.0b

1.0

2.0

9.62

10.0a

Introduced in:	DOM 0
Modified in:	DOM 3 Core

Returns the inner height of an element in pixels, including padding but not the horizontal scrollbar height, border, or margin.

clientHeight can be calculated as CSS height + CSS padding - height of horizontal scrollbar (if present).

Note: offsetLeft returns the position the upper left edge of the element; not necessarily the 'real' left edge of the element. This is important for span elements in flowed text that wraps from one line to the next. The span may start in the middle of the page and wrap around to the beginning of the next line. The offsetLeft will refer to the left edge of the start of the span, not the left edge of text at the start of the second line. Therefore, a box with the left, top, width and height of offsetLeft, offsetTop, offsetWidth and offsetHeight will not be a bounding box for a span with wrapped text.

Implementation
public function get clientHeight():Number

Example

This example shows how the clientHeight property and the offsetHeight property measure document height differently. The height of the div is set to 100, and this is the value retrieved by the offsetHeight property, not the clientHeight property.

         <div id=oDiv style="overflow:scroll; width:200; height:100"> . . . </div>
         <button onclick="alert(oDiv.clientHeight)">client height</button>
         <button onclick="alert(oDiv.offsetHeight)">offset heightY</button>

CSSOM View clientLeft

property

clientLeft:Number [read-only]

Product Versions :

5.5

6.0

7.0

8.0 as IE7

8.0 as IE8

2.0

3.0

3.1b

3.0

3.1

4.0b

1.0

2.0

9.62

10.0a

Introduced in:	DOM 0
Modified in:	DOM 3 Core

The width of the left border of an element in pixels.

It includes the width of the vertical scrollbar if the text direction of the element is right–to–left and if there is an overflow causing a left vertical scrollbar to be rendered. clientLeft does not include the left margin or the left padding.

Note: The difference between the offsetLeft and clientLeft properties is the border of the object.

Note: When layout.scrollbar.side property is set to 1 or to 3 and when the text-direction is set to RTL, then the vertical scrollbar is positioned on the left and this impacts the way clientLeft is computed.

Implementation
public function get clientLeft():Number

CSSOM View clientTop

property

clientTop:Number [read-only]

Product Versions :

5.5

6.0

7.0

8.0 as IE7

8.0 as IE8

2.0

3.0

3.1b

3.0

3.1

4.0b

1.0

2.0

9.62

10.0a

Introduced in:	DOM 0
Modified in:	DOM 3 Core

The width of the top border of an element in pixels. It does not include the top margin or padding.

Note: The difference between the offsetTop and the clientTop properties is the border area of the object.

Implementation
public function get clientTop():Number

CSSOM View clientWidth

property

clientWidth:Number [read-only]

Product Versions :

5.5

6.0

7.0

8.0 as IE7

8.0 as IE8

2.0

3.0

3.1b

3.0

3.1

4.0b

1.0

2.0

9.62

10.0a

Introduced in:	DOM 0
Modified in:	DOM 3 Core

Returns the inner width of an element in pixels. It includes padding but not the vertical scrollbar (if present, if rendered), border or margin.

Implementation
public function get clientWidth():Number

Example

This example shows how the clientWidth property and the offsetWidth property measure document width differently. The width of the div is set to 200, and this is the value retrieved by the offsetWidth property, not the clientWidth property.

         <div id=oDiv style="overflow:scroll; width:200; height:100"> . . . </div>
         <button onclick="alert(oDiv.clientWidth)">client width</button>
         <button onclick="alert(oDiv.offsetWidth)">offset widthY</button>

CSSOM View offsetHeight

property

offsetHeight:Number [read-only]

Product Versions :

5.5

6.0

7.0

8.0 as IE7

8.0 as IE8

2.0

3.0

3.1b

3.0

3.1

4.0b

1.0

2.0

9.62

10.0a

Introduced in:	DOM 0
Modified in:	DOM 3 Core

Height of an element relative to the element's offsetParent.

Typically, an element's offsetHeight is a measurement which includes the element borders, the element vertical padding, the element horizontal scrollbar (if present, if rendered) and the element CSS height.

For the document body object, the measurement includes total linear content height instead of the element CSS height. Floated elements extending below other linear content are ignored.

Note (IE6): To comply with the Cascading Style Sheets, Level 1 (CSS1) World Wide Web link box model, Microsoft Internet Explorer 6 and later calculate the height of objects differently when you use the !DOCTYPE declaration in your document to switch on standards-compliant mode. This difference may affect the value of the offsetWidth propety. When standards-compliant mode is switched on, the width property specifies the distance between the left and right edges of the bounding box that surrounds the object's content. When standards-compliant mode is not switched on, and with earlier versions of Windows Internet Explorer, the width property also includes the border and padding belts that surround the object's bounding box.

Implementation
public function get offsetHeight():Number

Example

This example adjusts the size of a clock's readout to fit the current width and height of the document body.

         <html>
         <head>
         <title>A Simple Clock</title>
         <script type="text/javascript">
             function startClock() {
                 window.setInterval("Clock_Tick()", 1000);
                 Clock_Tick();
             }
         
             var iRatio = 4;
             function Clock_Tick() {
                 var dToday = Date();
                 var sTime = dToday.substring(11,19);
                 var iDocHeight = document.body.offsetHeight;
                 var iDocWidth = document.body.offsetWidth;
         
                 if ((iDocHeightRatio)>iDocWidth)
                 iDocHeight = iDocWidth / iRatio;
                 document.all.MyTime.innerText = sTime;
                 document.all.MyTime.style.fontSize = iDocHeight;
             }
         </script>
         </head>
         <body onload="startClock()">
         <p id="MyTime"> </p>
         </body>
         </html>

CSSOM View offsetLeft

property

offsetLeft:Number [read-only]

Product Versions :

5.5

6.0

7.0

8.0 as IE7

8.0 as IE8

2.0

3.0

3.1b

3.0

3.1

4.0b

1.0

2.0

9.62

10.0a

Introduced in:	DOM 0
Modified in:	DOM 3 Core

Returns the number of pixels that the upper left corner of the current element is offset to the left within the offsetParent node.

Note: offsetLeft returns the position the upper left edge of the element; not necessarily the 'real' left edge of the element. This is important for inline elements (such as span) in flowed text that wraps from one line to the next. The span may start in the middle of the line and wrap around to the beginning of the next line. The offsetLeft will refer to the left edge of the start of the span, not the left edge of text at the start of the second line. Therefore, a box with the left, top, width and height of offsetLeft, offsetTop, offsetWidth and offsetHeight will not be a bounding box for a span with wrapped text.

Implementation
public function get offsetLeft():Number

Example

         var colorTable = document.getElementById("t1");
         var tOLeft = colorTable.offsetLeft;
         
         if (tOLeft > 5) {
             // large left offset: do something here
         }

CSSOM View offsetParent

property

offsetParent:Element [read-only]

Product Versions :

5.5

6.0

7.0

8.0 as IE7

8.0 as IE8

2.0

3.0

3.1b

3.0

3.1

4.0b

1.0

2.0

9.62

10.0a

Introduced in:	DOM 0
Modified in:	DOM 3 Core

The element from which all offset calculations are currently computed.

offsetParent returns a reference to the object which is the closest (nearest in the containment hierarchy) positioned containing element. If the element is non-positioned, the root element (html in standards compliant mode; body in quirks rendering mode) is the offsetParent. offsetParent returns null when the element has style.display set to "none".

Note (IE5): In Microsoft Internet Explorer 5, the offsetParent property returns the table object for the td object.

Note (IE4): In Internet Explorer 4.0 it returns the tr object. You can use the parentElement property to retrieve the immediate container of the table cell.

Implementation
public function get offsetParent():Element

Example

This example shows how to determine the position of a td object. Although the td object appears to the far right in the document, its position is close to the x-axis and y-axis, because its offset parent is a table object rather than the document body. For Internet Explorer 4.0, this same example returns a position of 0,0 because the offset parent is the table row.

         <table border='1' align='right'>
             <tr>
                 <td id='oCell'>This is a small table.</td>
             </tr>
         </table>

         var oElement = document.getElementById("oCell");
         
         alert("The TD element is at (" + oElement.offsetLeft + 
         "," + oElement.offsetTop + ")\n" + "The offset parent is " 
         + oElement.offsetParent.tagName );

CSSOM View offsetTop

property

offsetTop:Number [read-only]

Product Versions :

5.5

6.0

7.0

8.0 as IE7

8.0 as IE8

2.0

3.0

3.1b

3.0

3.1

4.0b

1.0

2.0

9.62

10.0a

Introduced in:	DOM 0
Modified in:	DOM 3 Core

Returns the distance of the current element relative to the top of the offsetParent node.

Implementation
public function get offsetTop():Number

Example

         d = document.getElementById("div1");
         
         topPos = d.offsetTop;
         
         if (topPos > 10) {
             // object is offset more
             // than 10 pixels from its parent
         }

CSSOM View offsetWidth

property

offsetWidth:Number [read-only]

Product Versions :

5.5

6.0

7.0

8.0 as IE7

8.0 as IE8

2.0

3.0

3.1b

3.0

3.1

4.0b

1.0

2.0

9.62

10.0a

Introduced in:	DOM 0
Modified in:	DOM 3 Core

The width of an element, relative to the layout.

Typically, an element's offsetWidth is a measurement which includes the element borders, the element horizontal padding, the element vertical scrollbar (if present, if rendered) and the element CSS width.

Implementation
public function get offsetWidth():Number

Example

This example adjusts the size of a clock's readout to fit the current width and height of the document.

         <html>
         <head>
         <title>A Simple Clock</title>
         <script type="text/javascript">
             function startClock() {
                 window.setInterval("Clock_Tick()", 1000);
                 Clock_Tick();
             }
         
             var iRatio = 4;
             function Clock_Tick() {
                 var dToday = Date();
                 var sTime = dToday.substring(11,19);
                 var iDocHeight = document.body.offsetHeight;
                 var iDocWidth = document.body.offsetWidth;
         
                 if ((iDocHeightRatio)>iDocWidth)
                 iDocHeight = iDocWidth / iRatio;
                 document.all.MyTime.innerText = sTime;
                 document.all.MyTime.style.fontSize = iDocHeight;
             }
         </script>
         </head>
         <body onload="startClock()">
         <p id="MyTime"> </p>
         </body>
         </html>

CSSOM View scrollHeight

property

scrollHeight:Number [read-only]

Product Versions :

5.5

6.0

7.0

8.0 as IE7

8.0 as IE8

2.0

3.0

3.1b

3.0

3.1

4.0b

1.0

2.0

9.62

10.0a

Introduced in:	DOM 0
Modified in:	DOM 3 Core

Height of the scroll view of an element; it includes the element padding but not its margin.

An element's scrollHeight is a measurement of the height of an element's content including content not visible on the screen due to overflow.

If the element's content generated a vertical scrollbar, the scrollHeight value is equal to the minimum clientHeight the element would require in order to fit all the content in the viewpoint without using a vertical scrollbar. When an element's content does not generate a vertical scrollbar, then its scrollHeight property is equal to its clientHeight property.

Implementation
public function get scrollHeight():Number

Example

This example uses the scrollHeight property to retrieve the height of the viewable content.

         <script type="text/javascript">
             function fnCheckScroll(){
                 var iNewHeight = oDiv.scrollHeight;
                 alert("The value of the scrollHeight property is: " 
                 + iNewHeight + "px"); 
             }
         </script>
         ...
         <div id="oDiv" style="overflow: scroll; height= 100px; width= 250px; text-align: left">
             ... 
         </div>
         <button onclick="fnCheckScroll()">Check scrollHeight</button>

CSSOM View scrollLeft

property

scrollLeft:Number

Product Versions :

5.5

6.0

7.0

8.0 as IE7

8.0 as IE8

2.0

3.0

3.1b

3.0

3.1

4.0b

1.0

2.0

9.62

10.0a

Introduced in:	DOM 0
Modified in:	DOM 3 Core

Gets or sets the number of pixels that an element's content is scrolled to the left.

Implementation
public function get scrollLeft():Number
public function set scrollLeft(value:Number):void

Example

         // Set the number of pixels scrolled
         element.scrollLeft = 10;

CSSOM View scrollTop

property

scrollTop:Number

Product Versions :

5.5

6.0

7.0

8.0 as IE7

8.0 as IE8

2.0

3.0

3.1b

3.0

3.1

4.0b

1.0

2.0

9.62

10.0a

Introduced in:	DOM 0
Modified in:	DOM 3 Core

Gets or sets the number of pixels that the content of an element is scrolled upward.

An element's scrollTop is a measurement of the distance of an element's top to its topmost visible content.

When an element content does not generate a vertical scrollbar, then its scrollTop value defaults to 0.

Implementation
public function get scrollTop():Number
public function set scrollTop(value:Number):void

Example

         // Get the number of pixels scrolled
         var  intElemScrollTop = element.scrollTop;

CSSOM View scrollWidth

property

scrollWidth:Number [read-only]

Product Versions :

5.5

6.0

7.0

8.0 as IE7

8.0 as IE8

2.0

3.0

3.1b

3.0

3.1

4.0b

1.0

2.0

9.62

10.0a

Introduced in:	DOM 0
Modified in:	DOM 3 Core

Returns either the width in pixels of the content of an element or the width of the element itself, whichever is greater.

If the element is wider than its content area (for example, if there are scroll bars for scrolling through the content), the scrollWidth is larger than the clientWidth.

Implementation
public function get scrollWidth():Number

Example

         <div id="aDiv" style="width: 100px; height: 200px; overflow: auto;">
             -FooBar-FooBar-FooBar
         </div>
         <br/>
         <input type="button" value="Show scrollWidth"
         onclick="alert(document.getElementById('aDiv').scrollWidth);">

Method Detail

CSSOM View getBoundingClientRect

()

method

public function getBoundingClientRect():TextRectangle

Product Versions :

5.5

6.0

7.0

8.0 as IE7

8.0 as IE8

2.0

3.0

3.1b

3.0

3.1

4.0b

1.0

2.0

9.62

10.0a

Introduced in:	DOM 0
Modified in:	DOM 3 Core

Retrieves an object that specifies the bounds of a collection of TextRectangle objects.

Note (IE8): In IE8 mode, the bounding rectangle is the same as the client rectangle.

Note (IE5): In Microsoft Internet Explorer 5, the window's upper-left is at 2,2 (pixels) with respect to the true client.

Note (Firefox 3.5): Firefox 3.5 adds width and height properties to the TextRectangle object.

Note (Firefox): Firefox doesn't round the top/bottom coordinates.

Returns

TextRectangle — The returned value is a TextRectangle object which is the union of the rectangles returned by getClientRects() for the element, i.e., the CSS border-boxes associated with the element.

Example

var rect = obj.getBoundingClientRect();

CSSOM View getClientRects

()

method

public function getClientRects():TextRectangleList

Product Versions :

5.5

6.0

7.0

8.0 as IE7

8.0 as IE8

2.0

3.0

3.1b

3.0

3.1

4.0b

1.0

2.0

9.62

10.0a

Introduced in:	DOM 0
Modified in:	DOM 3 Core

Retrieves a collection of rectangles that describes the layout of the contents of an object or range within the client. Each rectangle describes a single line.

Note (IE8): In IE8 mode, getClientRects always returns a collection of one rectangle—the same rectangle as getBoundingClientRect.

Note (IE): In IE5-7, split up a block-level element such as a <p> into one rectangle per line. This is incorrect: a block-level element should be reported as one rectangle.

Note (IE): In IE5-7, the rectangles are off by about two pixels. According to John Resig this is caused by the (invisible, but nonetheless present) borders of the <html> element.

Note (Firefox 3.5): Firefox 3.5 adds width and height properties to the TextRectangle object.

Note (Firefox): Firefox doesn't round the top/bottom coordinates.

Returns

TextRectangleList

Example

         var rects = obj.getClientRects();
         var numLines = rects.length;

Mon Aug 17 2009, 10:08 AM -04:00

DOM Reference Manual		All Packages \| All Classes \| Index \| Frames No Frames
ElementView	Properties \| Methods

Package	cssom.view
Interface	public interface ElementView
Implementors	Element