Height < Element

A property function that gets or sets the height of an element. The height property will not have any affect if the display style is not set property. In other words, objects with a display type of inline cannot be sized.  If a height value is given to an element in pixels, a integer value is returned represent its height. If the value set is a not a pixel value, a string will be returned. If no styling has been given to the element for height, the raw calculated height, not including padding, margin and border, will be returned. Below is an example:

var div = new Div();
alert(div.Height()); // returns 45;
alert(div.Height()); // returns "100%"

var div2 = new Div();
div.Content("This is a test");
alert(div.Height()); // returns the height of thd div when rendered.


Width, LayoutHeight and LayoutWidth

The Width property function operates in the same way as the Height property function. However, in order to get the full width and height that an element takes up, including all styling factors, use LayoutWidth and LayoutHeight functions. These are not property functions so they cannot be set. Here is an example:

var div = new Div();

div.Style(Style.Border, "black 2px solid");

alert(div.Width() + " x " + div.Height()); // shows 45 x 45
alert(div.LayoutWidth() + " x " + div.LayoutHeight()); // shows 49 x 49


The reason the second alert shows 49 x 49 is because there is 2 pixels of padding adding to each side, effectively increasing the width and height by 4 when displayed on the screen.

Last edited Mar 27, 2011 at 4:11 PM by dahrkdaiz, version 3


No comments yet.