Re: Accessing style properties within JavaScript

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
Quoted text here. Click to load it

Ah... not sure I understand the question but you can access style properties
in JavaScript like so:

<style type="text/css">

    color: #000000;
    background-color: #FFFFFF;

<script type="text/javascript">

function grabProperty(element)
    var e = eval("document.getElementById(element)");
    window.alert("Paragraph color: " +;


<p id="myP"><a href="javascript: grabProperty()">This is my

that's how I'd do it anyway...
NOTE: above code hasn't been tested. I just wrote it. it might help with
some ideas though.


Re: Accessing style properties within JavaScript wrote on 07 aug 2003 in comp.lang.javascript:

Quoted text here. Click to load it

see my script in:

< ?

The Netherlands.
(Please change the x'es to dots in my emailaddress)

Re: Accessing style properties within JavaScript ( writes:

Quoted text here. Click to load it

In some browsers. See below.

Quoted text here. Click to load it

It won't work, because the style property of the element does not
reflect the style that affects the element, but just the value of the
HTML style attribute of the element.
That is, if you have
 <style type="text/css">
 <div id="foo" style="color:yellow">BAR</div>
The the following code
 var elemStyle = document.getElementById("foo").style;
 alert(elemStyle.color + "/" + elemStyle.backgroundColor);
will alert the string "yellow/", because the color is given in the
style attribute and therefore is a property og the style object,
but the background color is not.

What you *can* do is one of two things.

1: to access the stylesheet element itself.
 IE: alert(document.styleSheets[0].rules[0].style.backgroundColor);
 Mozilla: alert(document.styleSheets[0].cssRules[0].style.backgroundColor);

This sounds as what you are asking for.

2: To access the computed style of the element, which is the collected
information from alls stylesheets and styles that affect the element.

 IE: alert(document.getElementById("foo").currentStyle.backgroundColor);

 Mozilla/Opera7.2(currently in beta):
  var elem = document.getElementById("foo");

I have made an example:
You can test it in IE, Mozilla and Opera 7.2beta2.
Lasse Reichstein Nielsen  -
 Art D'HTML: <URL:
  'Faith without judgement merely degrades the spirit divine.'

Site Timeline