www.fgks.org   »   [go: up one dir, main page]
Welcome  |  Sign In
 | 
Click to Rate and Give Feedback
Properties
 offsetWidth Property
offsetWidth Property

Retrieves the width of the object relative to the layout or coordinate parent, as specified by the offsetParent property.

Syntax

HTMLN/A
Scripting[ iWidth = ] object.offsetWidth

Possible Values

iWidthInteger that receives the width, in pixels.

The property is read-only. The property has no default value.

Remarks

You can determine the location, width, and height of an object by using a combination of the offsetLeft, offsetTop, offsetHeight, and offsetWidth properties. These numeric properties specify the physical coordinates and dimensions of the object relative to the object's offset parent.

For more information about how to access the dimension and location of objects on the page through the Dynamic HTML (DHTML) Document Object Model (DOM), see Measuring Element Dimension and Location.

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. For more information, see CSS Enhancements in Internet Explorer 6 World Wide Web link.

Examples

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 LANGUAGE="JScript">
function startClock()
{
    window.setInterval("Clock_Tick()", 1000);
    Clock_Tick();
}

var ratio = 4;
function Clock_Tick()
{
    var s = Date();
    var t = s.substring(11,19);
    var doc_height = document.body.offsetHeight;
    var doc_width = document.body.offsetWidth;

    if ((doc_height*ratio)>doc_width)
        doc_height = doc_width / ratio;
        document.all.MyTime.innerText = t;
        document.all.MyTime.style.fontSize = doc_height;
}
</SCRIPT>
<BODY >
<P ID="MyTime">&nbsp;</P>
</BODY>
</HTML>

This example uses the offsetWidth property and the clientWidth property to show the different ways of measuring the object size.

<DIV ID=oDiv STYLE="overflow:scroll; width:200; height:100"> . . . </DIV>
<BUTTON >client width</BUTTON>
<BUTTON >offset width</BUTTON>
This feature requires Microsoft® Internet Explorer 4.0 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

Standards Information

There is no public standard that applies to this property.

Applies To

A, ABBR, ACRONYM, ADDRESS, APPLET, AREA, B, BDO, BIG, BLOCKQUOTE, BODY, BR, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, CUSTOM, DD, DEL, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FONT, FORM, FRAME, hn, HR, I, IFRAME, IMG, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=image, INPUT type=password, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, INS, KBD, LABEL, LEGEND, LI, LISTING, MAP, MARQUEE, MENU, NOBR, OBJECT, OL, OPTION, P, PLAINTEXT, PRE, Q, RT, RUBY, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP
Tags What's this?: Add a tag
Community Content
 
Add Community Content
How tables can interfere      BuoyantCreations   |   Edit   |  

Having a script inside a table where an id is declared returns "0" for the id's offsetWidth and clientWidth despite any content the object may have.

This example will work:

<table><tr><td id="tablecell1">Some content to give it a width</td></tr></table>
<script>alert(document.all.tablecell1.offsetWidth);</script>

This one will not:

<table><tr><td id="tablecell1">
  Some content to give it a width
  <script>alert(document.all.tablecell1.offsetWidth);</script>
</td></tr></table>


Nor will this nested example in which the inner table is closed:

<table><tr><td>
   <table><tr><td id="nested1">Some content to give it a width</td></tr></table>
   <script>alert(document.all.nested1.offsetWidth);</script>
</td></tr></table>

This is the above corrected:

<table><tr><td>
   <table><tr><td id="nested1">Some content to give a width</td></tr></table>
</td></tr></table>
<script>alert(document.all.nested1.offsetWidth);</script>
Tags What's this?: Add a tag
© 2008 Microsoft Corporation. All rights reserved. Terms of Use  |  Trademarks  |  Privacy Statement
Page view tracker
DCSIMG