g(..).getStyle(styleName, [n])

Returns the specified style property of the nth element in the GImme Object's internal array; n is optional and default to 0.

Returns: The specified style property of the nth element in the GImme Object's internal array.
  • styleName, required: The name of the desired style property to retrieve (ex: 'display' or 'marginLeft').
  • n, optional (default = 0): The index of the element whose .style[styleName] is to be retrieved.

// retrieves the .style.display of the element whose id is #navigation
var disp = g('#navigation').getStyle('display');

// retrieves the .style.top position of the first <div> element with the class "monkey"
var topPos = g('div.monkey').getStyle('top');

// retrieves the .style.opacity of the <body> element
var opacity = g(document.body).getStyle('opacity');

// retrieves the background color of the 3rd <p> element on the page
var bg = g('p').getStyle('backgroundColor', 2);

// retrieves the marginLeft of the element whose id is #main
var leftMargin = g('#main').getStyle('marginLeft');

Additional Information:
The .getStyle(..) method will attempt to equalize browser differences as well as account for the fact that styles may have been initially set via a CSS stylesheet (as opposed to having been set inline with the style attribute or though javascript.

It's important to realize that equalizing browser difference means doing a considerable amount of extra work for non-W3C browsers (like IE) in order to normalize all units to pixels. The net effect should be transparent to the developer. Take the following CSS as an example:

<style type = "text/css">
          position: relative;
          top: 25%;
          left: 2em;
<script type = "text/javascript">
     var top = g('.foo').getStyle('top');
     var left = g('.foo').getStyle('left');

The above example will attempt to retrieve the .style.top and .style.left properties of the 1st element on the page whose class is "foo." In doing so, it will attempt to normalize "25%" and "2em" to the appropriate pixel values for all browsers. Note that the result is always a string, so performing mathematical operation will first require a call to either parseInt(..) or parseFloat(..).

Last edited Jun 12, 2007 at 8:37 PM by sstchur, version 2


No comments yet.