Current Style Method

Get Current Style Method

Method: CJL_getCurrentStyle()

Summary:

Cross-platform JavaScript method for retrieving style information set in either a CSS style sheet, a <style> block, or inline.

Submitted: 04/01/2003

Created by: CodeHouse.com

Browser Compatibility for this method

Internet Explorer 5.2+ for Mac OS X
Internet Explorer for Windows 5.0+
Netscape 6.1+
Mozilla 1.0+

Demo

The demo displays style information for styles set both inline and within a <style> block.

Source Code

The source code for this method is contained in the text area below. You can copy and paste it into your own source code.

Before using the source code, make sure that you read and agree to the terms of the License Agreement, which will open in a separate window.

/******************************************************** * Copyright (C) 2002-2003, CodeHouse.com. All rights reserved. * CodeHouse(TM) is a registered trademark. * * THIS SOURCE CODE MAY BE USED FREELY PROVIDED THAT * IT IS NOT MODIFIED OR DISTRIBUTED, AND IT IS USED * ON A PUBLICLY ACCESSIBLE INTERNET WEB SITE. * * CodeHouse.com JavaScript Library Module: Get Current Style Method * * You can obtain this script at http://www.codehouse.com ********************************************************/ function CJL_getCurrentStyle(elem, prop) { if( elem.currentStyle ) { var ar = prop.match(/\w[^-]*/g); var s = ar[0]; for(var i = 1; i < ar.length; ++i) { s += ar[i].replace(/\w/, ar[i].charAt(0).toUpperCase()); } return elem.currentStyle[s] } else if( document.defaultView.getComputedStyle ) { return document.defaultView.getComputedStyle(elem, null).getPropertyValue(prop); } }

Method:

CJL_getCurrentStyle(elem, prop)

Description:

Returns global style information for an element. The style could be set in either a CSS style sheet, a <style block, or inline.

Example Usage:

Assigns the width of the document's left margin to borderLeft.

borderLeft = CJL_getCurrentStyle(document.body, "margin-left");

Comments:

CJL_getCurrentStyle returns an undefined result when called using Opera 7 and Safari 1 beta. It is likely that these browsers will support this method in the future as this functionality is in the DOM specification.

Parameters

elem:

Target element to retrieve style information for. This parameter is required.

prop:

CSS property of elem to retrieve style information for. This parameter is required.

Return Value

The value associated with the CSS property for the target element. Note that not all CSS properties retrieved in this manner are supported by both browsers. The type of result returned might vary with the browser and version of the browser.

Support

If you have any questions, find any bugs, or have suggestions, feel free to contact us.