getClassById???

[IxxI]

Is there such a thing as getClassById, like the Element version but modifying a class in css. Not really sure if this is a javascript or css question so feel free to move it if it should be in css.
Thanks,

IxxI

[Nevermore]

What do you mean by 'modifying a class'?

[IxxI]

In my css section I have a class called subs (.subs), and I want a user to be able to specify a background colour for that class so that all the divs affected by that class change colour. However I want to do that in the javascript, so I can change it on the fly. Hence the getClassById.style.background="blah" example.
Thanks,

IxxI

[Jona]

Hmmmm.... IxxI, why don't you just write a style each time. Example: document.head.style.subs.background = document.myForm.myTextBox.value;

[IxxI]

Sorry Jona - it doesn't seem to work. I'm calling from a variable, so I don't know if thats the problem. My code is:

document.head.style.subs.background = subcol;

where subcol = "red", and it doesn't seem to work. Any more suggestions??
Thanks,

IxxI

[Jona]

lol, my bad, "document.head.style" is null or not an object. I didn't even think about that. OK, try this:


document.style.subs.backgroundColor = subcol;

[IxxI]

Nope, same error, sorry...

IxxI

[Jona]

lol, OK, I'll be right back and have it working (I think lol) for ya... ;)

[Jona]

Dude, I could only get the innerHTML of the style tag... I tried to change that, but it doesn't seem to work... Gives me an, "unknown runtime error." It's possible that it's impossible... lol! That's funny. You could try searching http://devedge.netscape.com/ or http://msdn.microsoft.com/ for it, though. document.class also causes an error, but document.classes is undefined..

[Jona]

You can use element.className to get the name of the class of the element. Where element is the name of the event.srcElement , or the any element of which you refer to--also known as a "tag." (lol)

[Nevermore]

Are you sure it wouldn't be easier to give the ones you want to change sequential ids (e.g. class1, class2, class3), and iterate through with a for loop?

[IxxI]

I'm beginning to think it might...

IxxI

[Fang]

document.styleSheets[0].rules.item("subs").style.background="red"
Assuming it's in the first stylesheet. This only works for IE!
There was something like:
classes.subs.all.bgcolor = red" for Netscape, but it doesn't seem to work anymore. See (http://devedge.netscape.com/library/manuals/2000/javascript/1.3/reference/document.html#1222722) then classes

[IxxI]

That doesn't seem to work either. I've only got one stylesheet so that doesn't seem to be the problem. Any ideas why it might not be working??
Thanks,

IxxI

[Vladdy]

This will return the css selector object if such exists.

function getStyle(name)
{ for(i=0; i<document.styleSheets.length; i++)
{ for(j=0; j<document.styleSheets[i].cssRules.length; j++)
{ if(document.styleSheets[i].cssRules[j].selectorText == name)
return document.styleSheets[i].cssRules[j].style;
}
}
return null;
}

[Fang]

If the class is only used in <div>s:
function ChangeBackgroundTo(MyColor) {
var i, n_elms, elms = document.getElementsByTagName("div");
n_elms = elms.length;
for (i=0; i < n_elms; i++) {
if(elms[i].className=="subs") {
elms[i].style.background=MyColor;
}
}
}

[IxxI]

Thanks Fang!

IxxI

[IxxI]

Actually, sorry about this but I can't seem to get it to work. Is there anything wrong with this? menucol, textcol, subcol, and subtext are all variables which have colours in them.

function ChangeColourLinks() {
var z, n_elms, elms = document.getElementsByTagName("div");
n_elms = elms.length;
for (z=0; z < n_elms; z++) {
if(elms[z].className=="links") {
elms[z].style.background=menucol;
elms[z].style.color=textcol;
}
else if (elms[z].className=="lastlink") {
elms[z].style.background=menucol;
elms[z].style.color=textcol;
}
else if (elms[z].className=="links2") {
elms[z].style.background=subcol;
elms[z].style.color=subtext;
}
else if (elms[z].className=="links3") {
elms[z].style.background=subcol;
elms[z].style.color=subtext;
}
}
}

I've tried removing all the else if statements but it still doesn't work. Any ideas??
Thanks,

IxxI

[Jona]

Not sure if this is why, but a common error is we tend to use element names as IDs. Change the ID of your div to something like, "divy" or "doodlie" or something; then change your getElementById("div"); to the ID of the div.

[IxxI]

Its not ElementById, its ElementByTagName. All that does is get all the divs and plonks them in the variable elms. The name of my divs doesn't matter, its the fact that they are divs, if that makes sense. Then it should search through the divs for those with classname links and change all of those. Thanks for the suggestion though Jona...

IxxI

[Jona]

lol, I merely glanced at your code and didn't notice you were using TagName rather than Id. My bad. :rolleyes:

Your code looks fine to me, although I haven't tested it. You might want to add the last else{} in there for good measure, though. ;)

[Fang]

This works for me, or is it not quite what you are trying to do?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>ChangeColourLinks</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript">
//<![CDATA[
<!--
var menucol="red";
var textcol="green";
var subcol="orange";
var subtext="white";
function ChangeColourLinks() {
var z, n_elms, elms = document.getElementsByTagName("div");
n_elms = elms.length;
for (z=0; z < n_elms; z++) {
if(elms[z].className=="links") {
elms[z].style.background=menucol;
elms[z].style.color=textcol;
}
else if (elms[z].className=="lastlink") {
elms[z].style.background=menucol;
elms[z].style.color=textcol;
}
else if (elms[z].className=="links2") {
elms[z].style.background=subcol;
elms[z].style.color=subtext;
}
else if (elms[z].className=="links3") {
elms[z].style.background=subcol;
elms[z].style.color=subtext;
}
}
}
//-->
//]]>
</script>
<style type="text/css">
<!--
.links, .lastlink, .links2, .links3 {background:yellow; color:blue;}
-->
</style>
</head>
<body>
<div class="links" onmouseover="ChangeColourLinks();">links</div><br />
<div class="lastlink">lastlink</div><br />
<div class="links2">links2</div><br />
<div class="links3">links3</div>
</body>
</html>
A switch is clearer than if else ...

[Mr J]

Not sure if this is any help but I dug it out anyway

<script>

function test(){

val=document.f1.t1.value

for(i=0;i<document.getElementsByTagName("DIV").length;i++){
if(document.getElementsByTagName("DIV")[i].className=="myclass"){
bb=document.getElementsByTagName("DIV")[i].className+[i]
document.getElementsByTagName("DIV")[i].style.backgroundColor=val
}
}
}
</script>

<style>
.myclass{background-color:blue;color:red; width:100}
</style>

<div class="myclass">DIV1</div>
<P><div class="myclass">DIV1</div>
<P><div class="myclass">DIV1</div>

<form name="f1">
Enter A Colour <input type="text" name="t1">
<input type="button" onclick="test()" value="button">
</form>