Netscape DevEdge

Skip to: [content] [navigation]

Class xbStyle

Synopis

class xbStyle
{
public:
xbStyle(HTMLElement element, Window window);

  // properties
  Object styleObj;
  Object object;
  Window window;

  // methods
  String getClip();
  void setClip(String sClip);

  Number getClipTop();
  void setClipTop(Number px);
            
  Number getClipRight();
  void setClipRight(Number px);
            
  Number getClipBottom();
  void setClipBottom(Number px);
            
  Number getClipLeft();
  void setClipLeft(Number px);
            
  Number getClipWidth();
  void setClipWidth(Number px);
            
  Number getClipHeight();
  void setClipHeight(Number px);
            
  Number getLeft();
  void setLeft(Number px);
            
  Number getTop();
  void setTop(Number px);
            
  Number getPageX();
  void setPageX(Number px);
            
  Number getPageY();
  void setPageY(Number px);
            
  Number getHeight();
  void setHeight(Number px);
            
  Number getWidth();
  void setWidth(Number px);
            
  Number getVisibility();
  void setVisibility(String sVisibility);
            
  Number getzIndex();
  void setzIndex(Number z);
            
  Number getBackgroundColor();
  void setBackgroundColor(String sColor);
            
  Number getColor();
  void setColor(String sColor);
            
  void moveAbove(xbStyle styleObject);
  void moveBelow(xbStyle styleObject);

  void moveBy(Number deltaX, Number deltaY);
  void moveTo(Number x, Number y);
  void moveToAbsolute(Number x, Number y);

  void resizeBy(Number deltaX, Number deltaY);
  void resizeTo(Number x, Number y);

  void setInnerHTML(String sHtml);

  String getEffectiveValue(String propname);
  Number getBorderTopWidth();
  Number getBorderRightWidth();
  Number getBorderBottomWidth();
  Number getBorderLeftWidth();

  Number getMarginTop();
  Number getMarginRight();
  Number getMarginBottom();
  Number getMarginLeft();

  Number getPaddingTop();
  Number getPaddingRight();
  Number getPaddingBottom();
  Number getPaddingLeft();

  Number getClientHeight();
  Number getClientWidth();
}

Source

Uses

See Also

Description

xbStyle is an JavaScript Object that is used to expose the style properties of an Element in a cross browser fashion. Netscape Navigator 4.x, Gecko based browsers such as Netscape 6.x, Internet Explorer 4+ and Opera 5+ are supported.

Cross Browser Support

DOM based browser sniffing is used whereever possible to allow any standards compliant browser to support xbStyle. User Agent based browser sniffing is used only in restricted parts of the API that require differentiation of particular implementations.

For browsers that support CSS2 Properties such as, Gecko based browsers and Internet Explorer 4 and above, xbStyle simply queries and manipulates the properties of the style object.

Modern browsers which support the W3 DOM Standard can access any element via document.getElementById and use xbStyle to manipulate the Style properties in a cross browser fashion. Note that the ability to query or modify Style properties depends up on the CSS display and position properties. For example in CSS 2, height and width are not defined for non-replaceable Elements with display: inline such as SPAN and as a result xbStyle can not manipulate these properties for

For Netscape 4, xbStyle manipulates the corresponding properties of a Layer object.

Notes

Script Location/Invocation

xbStyle must be able to locate references to the HTML Elements whose style properties it will query or modify. In order to do this the script referencing the HTML Elements must either occur in an ONLOAD handler for the document or must occur after the HTML Element is defined in the document.

CSS Units

xbStyle requires that all CSS length properties use pixel units. If you use non-pixel units, xbStyle will ignore that length. If you wish to be notified of any such errors, turn on debugging at the beginning of xbStyle.js. This will report any errors to a septe Debug window.

Netscape Navigator 4

xbStyle was originally designed to provide limited cross browser support for CSS properties that could reliably be used in Netscape Navigator 4.x and Internet Explorer 4.x. It has since been extended to support additional CSS properties which are not supported by Netscape Navigator 4.x.

Due to a bug in Netscape Navigator 4, you must include an empty script block at the beginning of your HTML document in order that the Object based sniffing work properly. Please see the examples for samples of this technique.

In order to use xbStyle with Netscape Navigator 4, you must code any HTML Element which you wish to manipulate as a DIV with either absolute or relative positioning. Netscape Navigator 4 will convert these positioned DIVs into Layers which can be manipulated via the xbDOM and xbStyle APIs. You can use the xbGetElementById and xbGetElementsByName functions available in xbDOM in order to locate references.

Netscape Navigator 4.x will not fully display the background properties for a DIV unless a border is specified. If you do not wish to have a border, you should still code a fractional border width in order to force Netscape Navigator 4 to fully display the background.

Netscape Navigator 4 is not capable of changing the background color of a DIV if the background color was specified via the CSS property background-color either in a CSS rule or in a STYLE attribute. In order to manipulate the background color of a DIV using Netscape Navigator 4, you must not code a background color in the CSS. Instead, set the background color using the xbStyle setBackgroundColor method.

Netscape Navigator 4 is not capable of changing the foreground color of text.

Clipping

Note that although the CSS 2 Specification states that the top, right, bottom, and left properties are offsets from the respective sides of the element's box, an errata modifies the CSS 2 specification to match the behavior of Netscape 4.x, 6.x, Internet Explorer and Opera where the right property can be consider the clipping region width and the bottom property can be consider the clipping region height.

Also note that although the specification states that clipping only occurs if the overflow CSS property is not set to visible, Gecko/Netscape 6.x, Netscape 4.x and Internet Explorer all browsers currently clip elements even if the overflow property is set to visible.

Finally, the specification states that any element can be clipped, however in Gecko/Netscape 6.x and Internet Explorer only absolutely positioned items can be clipped.

Note that Opera will report the clip settings however it is not possible to clip an element in Opera 5 or 6.

Opera 5+

Opera 5 and 6 support a very limited set of the DOM for HTML or CSS. Please see the Opera documentation for more details on the limitations of current implementations of Opera.

Development and Debugging

See xbDebug manpage for more information on using the xb Debugging facilities.

Examples

Download

xbStyle-examples.zip

Basic Example

This example illustrates the basics of using xbStyle. Note how an empty script block is included before any other scripts. This prevents the occurence of a bug in Netscape 4.x where Object based sniffing in external scripts fails. Also note the use of a border with a width of .1px. This is due to a bug in Netscape 4.x where the background color does not fill the entire boundary of an Element unless a border is specified.

The scripts required to use xbStyle are split into septe files for discussion and maintenance purposes. You can consolidate them for deployment if you wish.

<HTML>
  <HEAD>
    <TITLE>xbStyle Example</TITLE>
    <SCRIPT LANGUAGE="JavaScript"></SCRIPT>
    <SCRIPT LANGUAGE="JavaScript" SRC="/xbProjects-srce/xbLibrary.js"></SCRIPT>
    <SCRIPT LANGUAGE="JavaScript">
      // if you have not customized xbLibrary.js to automatically point to
      // the location where you have installed the xbAPI's, then you must
      // initialize the global variable xblibrary so that it can find your
      // scripts
      xblibrary = new xbLibrary('/xbProjects-srce/');
    </SCRIPT>
    <SCRIPT LANGUAGE="JavaScript" SRC="/xbProjects-srce/xbDOM.js"></SCRIPT>
    <SCRIPT LANGUAGE="JavaScript" SRC="/xbProjects-srce/xbDebug.js"></SCRIPT>
    <SCRIPT LANGUAGE="JavaScript" SRC="/xbProjects-srce/xbStyle.js"></SCRIPT>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
      function init()
      {
        // find the banner Element
        var banner = xbGetElementById('banner');
        
        // construct an xbStyle object for the banner Element
        var bannerstyle = new xbStyle(banner);
        
        bannerstyle.setWidth(xbGetWindowWidth());
        bannerstyle.setBackgroundColor('blue');
      }
      //-->
    </SCRIPT>
  </HEAD>
  <BODY onload="init()">
    <DIV ID="banner" STYLE="position: relative; color: yellow; border: .1px; height: 26px;">
      Banner Text
    </DIV>
  </BODY>
</HTML>
        

The remaining examples all use two positioned DIVs with varying values for position and with properties specified either using a CLASS or via a STYLE attribute.

Each example comes in a NO DOCTYPE version which will exercise Quirks Mode and an HTML 4.01 Strict DOCTYPE vesion which will exercise Standards Mode in Gecko based browsers, Internet Explorer 5 on Macintosh and Internet Explorer 6

Absolutely Positioned Div

NO DOCTYPE HTML 4.01 Strict

This example illustrates the behavior of an absolutely positioned Element using an Inline Style attribute but without a background color. Netscape 4.x can only set a background color if the background color has not been set via CSS.

Absolutely Positioned Div using CSS STYLE Attribute

NO DOCTYPE

HTML 4.01 Strict

This example illustrates the behavior of an absolutely positioned Element using an Inline Style attribute but with a background color. Netscape 4.x can only set a background color if the background color has not been set via CSS.

Note that this example does not depend upon the browser's ability to calculate the effective values for style attributes since they are specified directly in the Inline Style attribute.

Absolutely Positioned Div using CSS Class

NO DOCTYPE

HTML 4.01 Strict

This example illustrates the behavior of an absolutely positioned Element using a CSS Class but with a background color. Netscape 4.x can only set a background color if the background color has not been set via CSS.

Note that this example does depend upon the browser's ability to calculate the effective values for style attributes since they are not specified directly in the Inline Style attribute.

Relatively Positioned Div

NO DOCTYPE

HTML 4.01 Strict

This example illustrates the behavior of an relatively positioned Element using an Inline Style attribute but without a background color. Netscape 4.x can only set a background color if the background color has not been set via CSS.

Relatively Positioned Div using CSS STYLE Attribute

NO DOCTYPE

HTML 4.01 Strict

This example illustrates the behavior of an relatively positioned Element using an Inline Style attribute but with a background color. Netscape 4.x can only set a background color if the background color has not been set via CSS.

Note that this example does not depend upon the browser's ability to calculate the effective values for style attributes since they are specified directly in the Inline Style attribute.

Relatively Positioned Div using CSS Class

NO DOCTYPE

HTML 4.01 Strict

This example illustrates the behavior of an relatively positioned Element using a CSS Class but with a background color. Netscape 4.x can only set a background color if the background color has not been set via CSS.

Note that this example does depend upon the browser's ability to calculate the effective values for style attributes since they are not specified directly in the Inline Style attribute.

The next examples illustrate the behavior of nested elements.

Absolutely Positioned Div containing Absolutely Positioned Div

NO DOCTYPE

HTML 4.01 Strict

Absolutely Positioned Div containing Relatively Positioned Div

NO DOCTYPE

HTML 4.01 Strict

Relatively Positioned Div containing Absolutely Positioned Div

NO DOCTYPE

HTML 4.01 Strict

Relatively Positioned Div containing Relatively Positioned Div

NO DOCTYPE

HTML 4.01 Strict

Properties

styleObj

readonly Object - reference to either HTMLElement.style for CSS DOM Compliant browsers or to the LAYER object for Netscape Navigator 4.

object

readonly HTMLElement - reference to the HTMLElement used to create an instance of xbStyle. This is used to retrieve properties of the HTMLElement from the xbStyle object such as IE proprietary properties offsetTop, etc.

window

readonly Window - reference to the window which hosts the HTMLElement used to create an instance of xbStyle. This is used to retrieve references to the associated HTMLDocument for use with DOM Style methods that require it.

Methods

xbStyle(HTMLElement object, Window window)

Constructs an instance of the xbStyle class.

Arguments:

HTMLElement object whose style properties are to be manipulated.

Window window where object resides. If the object does not live in the same window as the xbStyle script, then the Window window argument must be specified.

Returns:

nothing

Support

Gecko/Netscape 6.x, Netscape Navigator 4+, Internet Explorer 4+, Opera

getClip()

Returns:

String clip property "rect(top, right, bottom, left)"

setClip(String sClip)

sets the CSS clip property.

Arguments:

String sClip has the form 'rect(top, right, bottom, left)' where top, right, bottom, left have pixel units, for example 'rect(0px, 10px, 10px, 0px)'.

Returns:

nothing

getClipTop()

Returns:

Number top clip property in pixels

setClipTop(Number px)

set the top property of the clip property.

Arguments:

Number px in pixels

Returns:

nothing

getClipRight()

Returns:

Number right clip property in pixels

setClipRight(Number px)

set the right property of the clip property.

Arguments:

Number px in pixels

Returns:

nothing

getClipBottom()

Returns:

Number bottom clip property in pixels

setClipBottom(Number px)

set the bottom property of the clip property.

Arguments:

Number px in pixels

Returns:

nothing

getClipLeft()

Returns:

Number left clip property in pixels

setClipLeft(Number px)

set the clip property of the clip property.

Arguments:

Number px in pixels

Returns:

nothing

getClipWidth()

Returns:

Number width of clipping region in pixels.

setClipWidth(Number px)

sets the width of the clipping region in pixels.

Arguments:

Number px in pixels

Returns:

nothing

getClipHeight()

Returns:

Number height of the clipping region in pixels

setClipHeight(Number px)

set the height of the clipping region.

Arguments:

Number px in pixels

Returns:

nothing

getLeft()

Returns:

Number computed value of the left property relative to the containing block

Support

Supported by Gecko/Netscape 6.x, Netscape 4.x, Internet Explorer 5+, Opera 5+

setLeft(Number px)

set the value of the left property relative to the containing block.

Arguments:

Number px in pixels

Returns:

nothing

Support

Supported by Gecko/Netscape 6.x, Netscape 4.x, Internet Explorer 5+, Opera 5+

getTop()

Returns:

Number computed value of the top property relative to the containing block

Support

Supported by Gecko/Netscape 6.x, Netscape 4.x, Internet Explorer 5+, Opera 5+

setTop(Number px)

set the value of the top property relative to the containing block.

Arguments:

Number px in pixels

Returns:

nothing

Support

Supported by Gecko/Netscape 6.x, Netscape 4.x, Internet Explorer 5+, Opera 5+

getPageX()

Returns:

Number the vertical offset from the top level containing block in pixels

Support

Supported by Gecko/Netscape 6.x, Netscape 4.x and Internet Explorer 5+ for absolutely positioned elements specified either in a CSS Class or via a CSS Inline Style attribute. Note that this value is not currently meaningful for relatively positioned elements.

Not supported by Opera 5+

setPageX(Number px)

set the vertical offset from the top level containing block.

Arguments:

Number px in pixels

Returns:

nothing

Support

Supported by Gecko/Netscape 6.x, Netscape 4.x and Internet Explorer 5+ for absolutely positioned elements specified either in a CSS Class or via a CSS Inline Style attribute. Note that this value is not currently meaningful for relatively positioned elements.

Not supported by Opera 5+

getPageY()

Returns:

Number the vertical offset from the top level containing block in pixels

Support

Supported by Gecko/Netscape 6.x, Netscape 4.x and Internet Explorer 5+ for absolutely positioned elements specified either in a CSS Class or via a CSS Inline Style attribute. Note that this value is not currently meaningful for relatively positioned elements.

Not supported by Opera 5+

setPageY(Number px)

set the vertical offset from the top level containing block.

Arguments:

Number px in pixels

Returns:

nothing

Support

Supported by Gecko/Netscape 6.x, Netscape 4.x and Internet Explorer 5+ for absolutely positioned elements specified either in a CSS Class or via a CSS Inline Style attribute. Note that this value is not currently meaningful for relatively positioned elements.

Not supported by Opera 5+

getHeight()

Returns:

Number the content height of the element.

Support

Supported by Gecko/Netscape 6.x, Netscape 4.x, Internet Explorer 5+ and Opera 5+

setHeight(Number px)

set the content height of the element.

Arguments:

Number px in pixels

Returns:

nothing

Support

Supported by Gecko/Netscape 6.x, Netscape 4.x and Internet Explorer 5+

Not supported by Opera 5+

getWidth()

Returns:

Number the content width of the element

Support

Supported by Gecko/Netscape 6.x, Netscape 4.x, Internet Explorer 5+, and Opera 5+

setWidth(Number)

set the content width of the element.

Arguments:

Number px in pixels

Returns:

nothing

Support

Supported by Gecko/Netscape 6.x, Netscape 4.x and Internet Explorer 5+

Not supported by Opera 5+

getVisibility()

Returns:

String value of the visibility property

Support

Supported by Gecko/Netscape 6.x, Netscape 4.x and Internet Explorer 5+ and Opera

setVisibility(String sColor)

set the value of the visibility property.

Arguments:

String one of 'visible', 'hidden'

Returns:

nothing

Support

Supported by Gecko/Netscape 6.x, Netscape 4.x and Internet Explorer 5+ and Opera

getzIndex()

Returns:

Number value of the z-index property

Support

Supported by Gecko/Netscape 6.x, Netscape 4.x and Internet Explorer 5+ and Opera for positioned elements

setzIndex(Number z)

set the z-index property.

Arguments:

Number z-index value

Returns:

nothing

Support

Supported by Gecko/Netscape 6.x, Netscape 4.x and Internet Explorer 5+ and Opera for positioned elements

getBackgroundColor()

Returns:

String color value of the background

Support

Supported by Gecko/Netscape 6.x, Netscape 4.x and Internet Explorer 5+ and Opera

setBackgroundColor(String color)

set the color of the background.

Arguments:

String background color value

Returns:

nothing

Support

Supported by Gecko/Netscape 6.x, Netscape 4.x and Internet Explorer 5+ and Opera

getColor()

Returns:

String text color value

Support

Supported by Gecko/Netscape 6.x, Internet Explorer 5+ and Opera

Not supported by Netscape 4.x

setColor(String sColor)

set the text color value.

Arguments:

String text color value

Returns:

nothing

Support

Supported by Gecko/Netscape 6.x, Internet Explorer 5+ and Opera

Not supported by Netscape 4.x

moveAbove(xbStyle styleobj)

move this object above the referenced object in the z order.

Arguments:

xbStyle styleobj of element, this element is to be moved above.

Returns:

nothing

Support

Supported by Gecko/Netscape 6.x, Netscape 4.x and Internet Explorer 5+ and Opera for positioned elements

moveBelow(xbStyle styleobj)

move this object below the referenced object in the z order.

Arguments:

xbStyle styleobj of element, this element is to be moved below.

Returns:

nothing

Support

Supported by Gecko/Netscape 6.x, Netscape 4.x and Internet Explorer 5+ and Opera for positioned elements

moveBy(Number deltaX, Number deltaY)

move this element from it's current position by a relative distance.

Arguments:

  • Number deltaX horizontal distance in pixels

  • Number deltaY vertical distance in pixels

Returns:

nothing

Support

Supported by Gecko/Netscape 6.x, Netscape 4.x and Internet Explorer 5+ and Opera for positioned elements

moveTo(Number x, Number y)

move this element to a position relative to the containing block.

Arguments:

  • Number x horizontal position in pixels

  • Number y vertical position in pixels

Returns:

nothing

Support

Supported by Gecko/Netscape 6.x, Netscape 4.x and Internet Explorer 5+ and Opera for positioned elements

moveToAbsolute(Number x, Number y)

move this element to a position relative to the top level containing block.

Arguments:

  • Number x horizontal position in pixels

  • Number y vertical position in pixels

Returns:

nothing

Support

Supported in Gecko/Netscape 6.x, Netscape 4.x and Internet Explorer 5+ and Opera for absolutely positioned elements. Note this method is not currently useful for relatively positioned items.

resizeBy(Number deltaX, deltaY)

resize this element by a relative size

Arguments:

  • Number deltaX horizontal size change in pixels

  • Number deltaY vertical size change in pixels

Returns:

nothing

Support

Supported by Gecko/Netscape 6.x, Netscape 4.x and Internet Explorer 5+

Not supported by Opera

resizeTo(Number x, Number y)

resize this element to a definite size

Arguments:

  • Number x horizontal size in pixels

  • Number y vertical size in pixels

Returns:

nothing

Support

Suppored by Gecko/Netscape 6.x, Netscape 4.x and Internet Explorer 5+

Not supported by Opera

setInnerHTML(String sHtml)

replace the contents of this element with the specified HTML

Arguments:

String sHtml markup

Returns:

nothing

Support

Supported by Gecko/Netscape 6.x, and Internet Explorer 5+ support for any HTML Elements.

Supported by Netscape 4.x supports this method for absolutely positioned Elements only.

Not supported by Opera 5+

getEffectiveValue(String propname)

returns the effective value of a CSS property after the cascade and as a result of any modifications via script. Note that W3 CSS DOM compliant browsers such as Netscape 6 and other Gecko based browsers use the standard method getComputedStyle to retrieve effective values while Internet Explorer uses the currentStyle object. Opera and Netscape Navigator maintain the effective values as part of their style objects.

Arguments:

String propname is the name of the CSS DOM property not the CSS 2 property name. For example, to get the background color for an element, you would pass 'backgroundColor' to getEffectiveValue rather than 'background-color'. Also note that any CSS property supported by a browser can be returned via this method. Properties that are not supported by a particular browser will return the empty string.

Returns:

String Effective CSS property value

Note: Gecko Support

Netscape 6.1, Netscape 6.2, and other Gecko based browsers prior to release 0.9.6 do not correctly calculate the clip property or the top property for non absolutely positioned elements. These browsers therefore return the actual value of HTMLElement.style.clip and the non-standard property HTMLElement.offsetTop in these circumstances.

Note:

All getXXX methods of xbStyle use this method to return the effective values of properties.

getBorderTopWidth()

Returns:

Number border top width in pixels

Support

Supported by Gecko/Netscape 6.x, Internet Explorer 5+ and Opera 5+

Not supported by Netscape Navigator 4.x

getBorderRightWidth()

Returns:

Number border right width in pixels

Support

Supported by Gecko/Netscape 6.x, Internet Explorer 5+ and Opera 5+

Not supported by Netscape Navigator 4.x

getBorderBottomWidth()

Returns:

Number border bottom width in pixels

Support

Supported by Gecko/Netscape 6.x, Internet Explorer 5+ and Opera 5+

Not supported by Netscape Navigator 4.x

getBorderLeftWidth()

Returns:

Number border left width in pixels

Support

Supported by Gecko/Netscape 6.x, Internet Explorer 5+ and Opera 5+

Not supported by Netscape Navigator 4.x

getMarginTop()

Returns:

Number margin top width in pixels

Support

Supported by Gecko/Netscape 6.x, Internet Explorer 5+ and Opera 5+

Not supported by Netscape Navigator 4.x

getMarginRight()

Returns:

Number margin right width in pixels

Support

Supported by Gecko/Netscape 6.x, Internet Explorer 5+ and Opera 5+

Not supported by Netscape Navigator 4.x

getMarginBottom()

Returns:

Number margin bottom width in pixels

Support

Supported by Gecko/Netscape 6.x, Internet Explorer 5+ and Opera 5+

Not supported by Netscape Navigator 4.x

getMarginLeft()

Returns:

Number margin left width in pixels

Support

Supported by Gecko/Netscape 6.x, Internet Explorer 5+ and Opera 5+

Not supported by Netscape Navigator 4.x

getPaddingTop()

Returns:

Number padding top width in pixels

Support

Supported by Gecko/Netscape 6.x, Internet Explorer 5+ and Opera 5+

Not supported by Netscape Navigator 4.x

getPaddingRight()

Returns:

Number padding right width in pixels

Support

Supported by Gecko/Netscape 6.x, Internet Explorer 5+ and Opera 5+

Not supported by Netscape Navigator 4.x

getPaddingBottom()

Returns:

Number padding bottom width in pixels

Support

Supported by Gecko/Netscape 6.x, Internet Explorer 5+ and Opera 5+

Not supported by Netscape Navigator 4.x

getPaddingLeft()

Returns:

Number padding left width in pixels

Support

Supported by Gecko/Netscape 6.x, Internet Explorer 5+ and Opera 5+

Not supported by Netscape Navigator 4.x

getClientHeight()

Returns:

Number IE compatible client height in pixels. This value is computed as getMarginTop() + getBorderTopWidth() + getPaddingTop() + getHeight() + getPaddingBottom() + getBorderBottomWidth() + getMarginBottom()

Support

Supported by Gecko/Netscape 6.x, Internet Explorer 5+ and Opera 5+

Not supported by Netscape Navigator 4.x

NOTE:

This method is not implemented correctly in xbStyle Revision 1.7

getClientWidth()

Returns:

Number IE compatible client width in pixels. This value is computed as getMarginLeft() + getBorderLeftWidth() + getPaddingLeft() + getWidth() + getPaddingRight() + getBorderRightWidth() + getMarginRight()

Support

Supported by Gecko/Netscape 6.x, Internet Explorer 5+ and Opera 5+

Not supported by Netscape Navigator 4.x

NOTE:

This method is not implemented correctly in xbStyle Revision 1.7

A+R