Get Styles

Sometimes you'll want to see what styles the default document view has. For instance, you gave a paragraph an width of 50%, but how do you see how many pixels that is in your users' browser?

In addition, sometimes you want to read out the styles applied to an element by embedded or linked style sheets. The style property only reflects the inline styles of an element, so if you want to read out other styles you have to resort to other means.

Return the paragraph to this place.

This is the style sheet of the test paragraph:

#test {font-size: 16px;
	padding: 10px;
	width: 50%;
	border-width: 1px;
	border-style: solid;
	border-color: #cc0000;
}

offset

Before going to the tricky bits, first a nice shortcut that has been inserted into both Mozilla and Explorer: offsetSomething. Using these few properties you can read out the most important information about the styles the paragraph currently has.

As an example, get the offsetWidth of the test paragraph. You'll see how many pixels its width is at the moment. To test it some more, resize the window (the paragraph, having a width of 50%, will also resize) and try again.

The script is quite simple:

function getOff()
{
	x = document.getElementById('test');
	return x.offsetWidth;
}

and we alert the returned value: alert('offsetWidth = ' + getOff()).

Now you have the width of the paragraph in the user's browser and you can start calculating things. There are several more offsets that you can read out:

Please note that these properties are read-only, you cannot change the offsetWidth of an element directly.

To show you what you can do, I've prepared a little example script. First of all, please move the test paragraph to this area, so you can see what's happening.

Then we're going to add 100 pixels to its width. If we look at the offsetWidth again, we'll see that it's changed. You can also remove 100 pixels from the width.

If you view this example in both browsers, you'll note that in Explorer the new width is the old width + 100px, but in Mozilla it isn't. That's because Mozilla is more standards-conforming here: as per the spec it counts only the width of the actual content as offsetWidth, while Explorer also adds the padding and the border. Even though Mozilla is correct here, I tend to favour the Explorer approach because it's more intuitive.

Anyway, this script is also simple if you don't mind the Mozilla/Explorer incompatibility:

function changeOff(amount)
{
	var y = getOff();
	x.style.width = y + amount;
}

We hand it the amount of pixels it should expand (100 or -100 in our example), then use getOff() to load the paragraph into x and to get the current offsetWidth. Finally we change the width to offsetWidth plus amount.

offsetTop and -Left

The offsetTop and offsetLeft properties have their own possibilities and quirks. See the Find position page for more information.

getStyle

As we've seen the offset properties are limited. The browsers give us a more general way of accessing default style information, but unfortunately it is less reliable and less generally usable than the offset properties.

Mozilla and Opera

Mozilla and Opera expect CSS syntax, not JavaScript syntax. For instance, to get the font size you must use font-size, as in CSS, and not fontSize, as in JavaScript.

Mozilla knows only a very few styles. border[-something], for instance, is empty in Mozilla, though Opera faithfully reports the correct styles.

Explorer

In Explorer we can get most of the styles, but unfortunately we sometimes need to be very exact. In this example border doesn't work, you'll need to get borderStyle, borderWidth and borderColor.

Please remember that to access the style property border-width we need to spell it borderWidth in JavaScript, because the dash can be mistaken for a minus sign. This goes for all style properties with a dash in them.

In addition, Explorer often gives auto (for the top property, for instance). Although this is very true (the natural flow of the page determines where the top of the paragraph will be), it's not very useful information. Another reason to stick with the offset properties whenever possible.

Try it

If you wish, you can again move the test paragraph so you can see it better. Then fill in a style property in the form field below and get the style by pressing the button.

Please remember that most browser support only a few styles. If one style doesn't work, try another one.

In Explorer you can try the border properties (see above), fontSize, fontFamily, margin, padding, backgroundColor, backgroundImage and some more properties.

Remember that Mozilla and Opera expect font-size, font-family and background-color.

The script

The script is once again fairly simple:

function getStyle(el,styleProp)
{
	var x = document.getElementById(el);
	if (x.currentStyle)
		var y = x.currentStyle[styleProp];
	else if (window.getComputedStyle)
		var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
	return y;
}

First we pass the function the id of the HTML element and the style property we wish to access

function getStyle(el,styleProp)
{

Then we store the HTML element in x:

	var x = document.getElementById(el);

First the Explorer way: the currentStyle of the HTML element:

	if (x.currentStyle)
		var y = x.currentStyle[styleProp];

Then the Mozilla way: the getComputedStyle() method, which also works in Opera:

	else if (window.getComputedStyle)
		var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);

Finally return y to whichever function asked for it (in this page it's the function prepare() that is called when you submit the form or click the link 'get the style').

	return y;
}

Although this function doesn't yet work well, it's the best you can do.