asked on

reading style attributes set by CSS using Javascript

I would like to be able to read the style attributes of an element from Javascript, where the style was set by a CSS.

When I set the style in the <div or <span, or whatever I can read them, but I am not seeing how to do this when the <div, <span or whatever sets the attributes using a class= and gets the settings from the CSS

mreuring

I could go an explain how to do it, however, this is one of those dicey areas where every browser has a different opinion. I think this code explains quite well, it's not originally mine though:

// Name: Get CSS Property
// Language: JavaScript
// Author: Travis Beckham | squidfingers.com
// Description: Retrieve a CSS property from inline and external sources
// Compatibility: IE4+, NS6+, Safari 1.3+ ( Opera 8+ tested ok so far, comment by windgazer.nl)
// --------------------------------------------------
// From: http://squidfingers.com/code/snippets/?id=getcssprop

function getCSSProp (element, prop) {
if (element.style[prop]) {
// inline style property
return element.style[prop];
} else if (element.currentStyle) {
// external stylesheet for Explorer
return element.currentStyle[prop];
} else if (document.defaultView && document.defaultView.getComputedStyle) {
// external stylesheet for Mozilla and Safari 1.3+
prop = prop.replace(/([A-Z])/g,"-$1");
prop = prop.toLowerCase();
return document.defaultView.getComputedStyle(element,"").getPropertyValue(prop);
} else {
// Safari 1.2
return null;
}
}

I've put the origin in the comments as I like to credit others for what they've done, but that particular part of the website is no longer up and running :(

Anyways, hope this helps,

Martin

jhurst

ASKER

I may be missing something here but I don't think so. I set the "element" using a getElementById and it does appear that I have the right one there since other attribuytes seem correct. I then used the code above. No good. In fact I even tried using each of the three methods, style, currentStyle... separately in case the ones that were not supported were messing me up. In no case can I get the color of the text

My style sheel specifies

.x {color: #0000ff}

My html:
<span class="x" id ="xx">Hello</span>

I just want to be able to read, and possibly set the color attribute for the word Hello

mreuring

The way the value gets reported is slightly different for different browsers, but it works when I set it up (tested with FF1.5 and IE6):
http://www.windgazer.nl/eexchange/Q_22755495.html

What browser are you testing with?

ASKER CERTIFIED SOLUTION

mreuring

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

jhurst

ASKER

It is not your fault that this is HORRIBLE - it works - it is just what I asked for. Thanks. ! Great!