Hiermenus Go Forth, XXV - DHTML Lab | 12


Logo

Hiermenus Go Forth, XXV:
Version 4.1.3 - The Complete Script (Full-Window)



In-line Content

Page HTMLIE6 Display
(with dimensions added)		 
<HTML STYLE="background:pink">
<HEAD>
<TITLE>IE6 Page Canvas</TITLE>
</HEAD>
<BODY STYLE="margin:30px;background:yellow">
<P>This is an <B>in-line</B> paragraph,<BR>
and the only content in this page</P>
</BODY>
</HTML>

BODY Element Property Values

document.body.clientWidth: 300
document.body.clientHeight: 200
document.body.offsetWidth: 320
document.body.offsetHeight: 204
document.body.scrollWidth: 300
document.body.scrollHeight: 98

HTML Element Property Values

document.documentElement.clientWidth: 0
document.documentElement.clientHeight: 0
document.documentElement.offsetWidth: 320
document.documentElement.offsetHeight: 204
document.documentElement.scrollWidth: 320
document.documentElement.scrollHeight: 204

Comments

This is a traditional page with no !DOCTYPE declaration, and no positioned elements.

The inner dimensions of the browser window, and page display, are reflected, as expected, in document.body.clientWidth and document.body.clientHeight. The HTML element returns 0 values for these properties as it does not represent the page canvas.

Both BODY and HTML return the same offsetWidth and offsetHeight values. These dimensions include any border that surrounds the client area, and visible scrollbars. In our example there is a 16px vertical scrollbar and the default 2px border that IE adds to the client area by default:

offsetWidth = 300 + 16 + (2 * 2) = 320
offsetHeight = 200 + (2 * 2) = 204

Notes:

  1. The scrollbar width can be set by the user when assigning a desktop scheme, in the Windows Display Properties dialog:

  2. The 2px IE default border width can be overridden by the page author by assigning a value to the border-width style property:
    <BODY STYLE="border-width:0px;">

The scrollWidth and scrollHeight properties reflect the actual page content, and are important only when used with the BODY element. Since the BODY is the page canvas, and because the content wraps within the client area, the scrollWidth is the complete width of the client area. If the content were to run off to the right and not wrap, then the scrollWidth value would be larger than the value of clientWidth. The scrollHeight reflects the vertical content plus the margins.

scrollHeight = 30 + 38 + 30 = 98




Page HTMLIE6 Display
(with dimensions added)		 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
      "http://www.w3.org/TR/REC-html40/loose.dtd">
<HTML STYLE="background:pink">
<HEAD>
<TITLE>IE6 Page Canvas</TITLE>
</HEAD>
<BODY STYLE="margin:30px;background:yellow">
<P>This is an <B>in-line</B> paragraph,<BR>
and the only content in this page</P>
</BODY>
</HTML>

BODY Element Property Values

document.body.clientWidth: 240
document.body.clientHeight: 38
document.body.offsetWidth: 240
document.body.offsetHeight: 38
document.body.scrollWidth: 240
document.body.scrollHeight: 38

HTML Element Property Values

document.documentElement.clientWidth: 300
document.documentElement.clientHeight: 200
document.documentElement.offsetWidth: 320
document.documentElement.offsetHeight: 204
document.documentElement.scrollWidth: 300
document.documentElement.scrollHeight: 98

Comments

The same page, in standards-compliant mode, with the HTML element representing the page canvas, returns a different set of property values.

The properties of the HTML element, now representing the page canvas, return the values that the BODY element did in the first example.

The BODY element properties now return the values we would expect from any normal HTML block element. The page margins are not accounted for, just the client area that the content contained within the BODY tag occupies. If the content were to run off to the right and not wrap, then the width properties would return values larger than the browser window width. The same rules apply to the height properties.





What would the property values be if there was no in-line content, just positioned content?


Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: November 13, 2001
Revised: November 13, 2001

URL: http://www.webreference.com/dhtml/column61/5.html