...

View Full Version : Getting a style value from a element that use a class?!



Rune Carlsen
09-11-2004, 08:51 PM
I have a element that uses a class, like:
<style id="abc" class="myClass" onClick="test(id)">....</span>

The function:

function test(id) {
alert(document.getElementById(id).style.backgroundColor);
}

Why doesn't this work?
It returns nothing, but the class, which the element uses, has a background-color value set... ?!?!?!

Am i missing something... ?

Rune

liorean
09-11-2004, 09:31 PM
There are a few things in that code snippet that I can say are wrong.

First of all, there is not onclick attribute for the style element. Did you mean span and not style?

Second, you should use this.id and not just id in your event handler.

Third, the element.style property only contains styles that are set through one of two methods: Either in the style attribute of the element, or through the element.style from a script. It does not contain any properties from embedded or external stylesheets (the style and link elements). If you want to access all the styles set on an element, there are two methods. One as specified in the DOM, one proprietary in iew:

// DOM way
document.defaultView.getComputedStyle(element,null).property;

// IE way
element.currentStyle.property;

Rune Carlsen
09-12-2004, 10:16 AM
Yes, I ment "span" of course.
Sorry for that, just a example code.

So, are you saying that there is NO way to get the values set in a class? (embedded)

Rune

Willy Duitt
09-12-2004, 12:17 PM
So, are you saying that there is NO way to get the values set in a class? (embedded)

No, Liorean pointed out that there is two ways to accomplish this... For Mozilla based browsers you must use defaultView.getComputedStyle while you must use currentStyle with Internet Explorer...

To be cross browser you must do some simple object detection to check which method to use... Below is a simple example...



<style>
<!--
span.myClass{ background-color:red;
cursor:pointer;
}
-->
</style>

<script type="text/javascript">
<!--//
function test(id){
var el = document.getElementById(id);

if(document.defaultView && document.defaultView.getComputedStyle){ // IS MOZILLA BASED BROWSER //;
var bg = document.defaultView.getComputedStyle(el, '').getPropertyValue("background-color");
alert('DOM way: '+bg);
}

else if(document.uniqueID && el.currentStyle){ // IS INTERNET EXPLORER //;
alert('IE way: '+el.currentStyle.backgroundColor);
}
}
//-->
</script>
</head>

<body>
<span id="abc" class="myClass" onclick="test(this.id)">style test</span>


.....Willy

Rune Carlsen
09-12-2004, 12:40 PM
Ok, thanks.
Based on this situation, can I still use:

document.getElementById(el).style.backgroundColor = '#D9D8D6';

to set the background-color value?

liorean
09-12-2004, 12:51 PM
Yes, certainly.

Rune Carlsen
09-12-2004, 06:30 PM
Thanks everyone, works smoothly.

Rune

Kor
09-13-2004, 08:29 AM
just watch out... Moz will return color values in RGB mode, not in Hexa...

liorean
09-13-2004, 12:24 PM
Actually, the value moz returns has sometimes been decimal and sometimes hex, they have changed normalised forms between versions. They'll likely change over to decimal rgba form when support for that is added. However, when you set it you can specify it any way you want.

Kor
09-13-2004, 04:54 PM
However, when you set it you can specify it any way you want.

Do you know a way to get a desired (Hex or RGB) value of a color?

liorean
09-13-2004, 06:28 PM
Yes, though I haven't tested it for compatibility. The method is rather well nested...
var
colorValue=
document.defaultView.getComputedStyle(element,nullorpseudoement)
.getPropertyCSSValue(propertyname).getRGBColorValue();
hexcolor=
'#'+
colorValue.red.getFloatValue(1).toString(16).replace(/^.$/,'0$&')+
colorValue.green.getFloatValue(1).toString(16).replace(/^.$/,'0$&')+
colorValue.blue.getFloatValue(1).toString(16).replace(/^.$/,'0$&');


Corrected...

jkd
09-13-2004, 09:52 PM
You mean .getPropertyCSSValue(), for one. And for another, getFloatValue() requires an argument. In this case, the number 1 should return the appropriate number. And only Mozilla supports that level of DOM scripting to my knowledge, Opera has (had) at least lackluster DOM2 Style, though I'm admittedly unsure about 7.6 or Safari...

liorean
09-13-2004, 10:48 PM
Safari DOM2Style is far less reliable then that Opera has. Opera fully supports the interfaces they support. Safari support is wider (or at least was wider before op7.5), but sadly they expose many not properly supported interfaces.

mbier
03-23-2005, 10:42 PM
This thread nearly solves a probelm I've been working on. Actually maybe the solution is here and and I just don't see it. I have the following code which attempts to determine the color of some text and set other text to match that color. It works fine in Firefox, but does nothing in IE. I'd be greatful for any assistance. Also, if I will have problems the code on Opera or Safari, I'd appreciate any pointers--I don't have a Mac to test Safari.




// setStyleByClass: given an element type and a class selector,
// style property and value, apply the style.
// args:
// t - type of tag to check for (e.g., TD)
// c - class name
// p - CSS property
// v - value
var ie = (document.all) ? true : false;
var c_style = "foo";
function setStyleByClass(t,c,p){
// alert("Hello world");
var elements;
if(t == '*') {
// '*' not supported by IE/Win 5.5 and below
elements = (ie) ? document.all : document.getElementsByTagName('*');
} else {
elements = document.getElementsByTagName(t);

}
for(var i = 0; i < elements.length; i++){
var node = elements.item(i);
for(var j = 0; j < node.attributes.length; j++) {
if(node.attributes.item(j).nodeName == 'class') {
if(node.attributes.item(j).nodeValue == c) {
// alert("type is: " + t + "\n" + "class name: " + c + "\n" + "CSS property: " + p + "\n" + "Node style: " + node.style);

TD = eval('node');
// alert("What we have is: " + TD);
// this seems to be a problem in IE

// IS MOZILLA BASED BROWSER
if(document.defaultView && document.defaultView.getComputedStyle){
c_style = document.defaultView.getComputedStyle(TD, '').getPropertyValue("color");
// alert("text color is: " + c_style);
// alert('DOM way: '+ c_style);
}
else if(document.uniqueID && c_style.currentStyle){
// IS INTERNET EXPLORER //
alert('IE way:' );
}

eval('node.style.' + p + " = '" + c_style + "'");
setStyleByTag("font","color", c_style,1)


}
}
}
}
}

glenngv
04-08-2005, 08:32 AM
Avoid using eval method. Use square bracket notation. See my sig for more info.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum