Search within TutorialsPark

Javascript DOM: Fine Grained CSS DOM Objects


To get fine grained information for each property in the stylesheet


Javascript DOM : Working with CSSStyleDeclaration Objects

By making use of properties and methods like getPropertyValue and others, you can obtain the properties that have been used to style elements.

However, getPropertyValue method cannot obtain the units used to define values. Eg: values used to express height is length while transition is expressed in time units(seconds, miliseconds) etc.

To get over this issue, you need to use the CSSStyleDeclaration.getPropertyCSSValue method to obtain CSSPrimitiveValue object which represents the values defined for each property in the stylesheet.

The members of the CSSPrimitiveValue Object are described in detail below

Table : Members of CSSPrimitiveValue Object

Property Description Returns
cssText To obtain text representation of the value string
getFloatValue(<name>) To obtain a number Value number
getRGBColorValue() To obtain a color Value. RGBColor
getStringValue() To obtain a string Value string
primitiveType To obtain a unit type for the value number
setFloatValue(<type>, <value>) To set a numberic value void
setStringValue(<type>, <value>) To set a value for a string based value void

The most useful property of the CSSPrimitiveValue object is the primtitiveType property, which tells you about the units used to define the CSS property.

The set of defined unit types used is shown in the table below.

Property Description
CSS_NUMBER To express unit as a number
CSS_PERCENTAGE To express unit as a percentage
CSS_EMS To express unit in ems
CSS_PX To express unit in pixels
CSS_CM To express units in centimeters
CSS_IN To express unit in inches
CSS_PT To express unit in points
CSS_PC To express unit in picas
CSS_DEG To express unit in degrees
CSS_RAD To express unit in radians
CSS_GRAD To express unit in gradians
CSS_MS To express unit in milliseconds
CSS_S To express unit in seconds
CSS_STRING To express unit as a string
CSS_RGBCOLOR To express unit as a color

Javascript DOM : Working with Convenience Properties

The most crucial feature of the CSSPrimitiveValue object it that it can convert between one unit to another.

In the demo below, the script finds values expressed in terms of pixels and then requests the same values as points and inches

Example: Javascript DOM : Basic information about Stylesheet.

Give it a TRY! » Note: The RGBColor object has three properties(red, blue, green) and each returns its own CSSPrimitiveValue object.


Javascript DOM : Working with Computed Styles

A group of CSS properties the browser uses to display an element is called the computed style

A CSSStyleDeclaration object containing the computed style can be obtained using the document.defaultView.getComputedStyle method.

The object returns details of all properties used by the browser to display the element and the value of each of them.

Example: Javascript DOM : Computed Style For an Element

Give it a TRY! » Note: The first row in the table specifies the number of properties in the computed style.