Hi,
I was wondering whether I can access and change some things in one css class from another css class or javascript code.
For example:
div.c1 { color: red; ...}
a.c2:hover(or click) { make color in div.c1 green }
Can I also do the something like that from javascript? (if not change then at least get the value)
thanks in advanceHey I've been wondering the same thing myself, actually...
Charles? Vladdy? Dave? DaveSW? Niket? Pyro? Khalid? Adam? Adam (the second one)? lol...
Jonayou missed niket out...
ummm....
well er...
I've had a look in the css spec, and I can't find anything like that. Thats not to say it's not there, just that I can't find it.
I'd have thought it would be easy with javascript though.
(says he who doesn't use javascript)
onClick="this.div.c1.style.color='red';"
Something like that maybe. Jona - you're the javascript expert! You'll probably need to modify the this to something else, but I don't know anything about javascript.
ps - the above message is code for 'I don't know'.or even
onClick="document.getElementById("c1").style.color="red";"
(adapted from someone elses code ofcourse!!)
Maybe the classes need to become ids for that to work? or is there a getElementByClass function?Originally posted by DaveSW
you missed niket out...
I EDITED MY POST!!!
Originally posted by DaveSW
onClick="this.div.c1.style.color='red';"
Something like that maybe. Jona - you're the javascript expert! You'll probably need to modify the this to something else, but I don't know anything about javascript.
ps - the above message is code for 'I don't know'.
Hehe.. Well, you're pretty close, but what you're doing with that code would be simply editing the object's CSS properties, rather than the actual class.
Originally posted by Davw SW
Maybe the classes need to become ids for that to work? or is there a getElementByClass function?
I don't know how you could turn a class into an ID, do you?
There is no getElementByClass function--unfortunately.
JonaWould this be better?
onClick="document.div.c1.style.color='red';"
And no I don't know how to turn a class into an ID. Unless it only occurs once??
I'm actually struggling through the css2 spec to see if you can use A:hover+.c1{...}
I think A:hover.c1 would only do the child attributes.Hmmm... I don't think so, since it's not exaclty a child of the document object. Let me go test for a few minutes, and I'll report back with my findings.
JonaYou can use this.className to return the class name of the current object, and you can change it to a different class--but you can't edit the properties of a class. However, you can edit the properties of the object itself... The only problem with this, is if you wanted to completely change the page's classes, you'd have to loop through all of them or use the styleSheets[] array and use a different stylesheet.
JonaOriginally posted by DaveSW
I'm actually struggling through the css2 spec to see if you can use A:hover+.c1{...}
I think A:hover.c1 would only do the child attributes.
Eh? A:hover.c1 would specify a class for the A tag. So <a href=http://www.webdeveloper.com/forum/archive/index.php/"blah.html">Text</a> would be blue (if not visited, for me anyways) and <a href="blah.html" class="c1">Text</a> would be whatever color I specify in the class. Isn't this the same in CSS2?
JonaAlso, here is the code I tested the class thing with:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en"><head><title>Switching Classes</title>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<style type="text/css">
<!--
span.c1 {color:blue;}
span.c2 {color:red;}
-->
</style>
</head><body>
<p>Text... <span class="c1" onMouseOver="this.className='c2'" onMouseOut="this.className='c1'"> Blue or red text?</span></p>
</body></html>
JonaOriginally posted by Jona
Eh? A:hover.c1 would specify a class for the A tag. So <a href=http://www.webdeveloper.com/forum/archive/index.php/"blah.html">Text</a> would be blue (if not visited, for me anyways) and <a href="blah.html" class="c1">Text</a> would be whatever color I specify in the class. Isn't this the same in CSS2?
Jona
Yeah - but I'm sure I saw some css classes with a + sign between, which could possibly mean two classes for one action. maybe not!!
Is the code you posted supposed to work? all it does for me is the same as a hover tag would...
Maybe we should just say the answer is no...Originally posted by DaveSW
Yeah - but I'm sure I saw some css classes with a + sign between, which could possibly mean two classes for one action. maybe not!!
Oh you meant two classes? Hmm.. There's no telling. Probably not, I don't see much use of it because you could just use one class instead of two classes combined.
Originally posted by DaveSW
Is the code you posted supposed to work? all it does for me is the same as a hover tag would...
Maybe we should just say the answer is no...
The code does work. It's supposed to change the text color onMouseOver. What it's actually doing is changing the class from c1 to c2 onMouseOver, and reverses it onMouseOut. That's the best I could do--there is no way to edit a class.
[Jona]Originally posted by chuvak
Hi,
I was wondering whether I can access and change some things in one css class from another css class or javascript code.
For example:
div.c1 { color: red; ...}
a.c2:hover(or click) { make color in div.c1 green }
Can I also do the something like that from javascript? (if not change then at least get the value)
thanks in advance
Pure CSS solution is possible when div.c1 is a descendant of a.c2:
<a class="c2">Here is link <div class="c1"> Here is stuff I want to change</div></a>
In this case your css is:
div.c1 { color: red;}
a.c2:hover div.c1 { color: green;}
When the two are independent, you are better off defining 2 classes and changing the className of the div depending on action:Wow, Vladdy, I didn't even think about that (nesting it).
lol.
[Jona]And if you define the position of your div as absolute you can actully make it appear completely independent from the anchor...thanks everybody
I was wondering whether I can access and change some things in one css class from another css class or javascript code.
For example:
div.c1 { color: red; ...}
a.c2:hover(or click) { make color in div.c1 green }
Can I also do the something like that from javascript? (if not change then at least get the value)
thanks in advanceHey I've been wondering the same thing myself, actually...
Charles? Vladdy? Dave? DaveSW? Niket? Pyro? Khalid? Adam? Adam (the second one)? lol...
Jonayou missed niket out...
ummm....
well er...
I've had a look in the css spec, and I can't find anything like that. Thats not to say it's not there, just that I can't find it.
I'd have thought it would be easy with javascript though.
(says he who doesn't use javascript) onClick="this.div.c1.style.color='red';"
Something like that maybe. Jona - you're the javascript expert! You'll probably need to modify the this to something else, but I don't know anything about javascript.
ps - the above message is code for 'I don't know'.
or evenonClick="document.getElementById("c1").style.color="red";"
(adapted from someone elses code ofcourse!!)
Maybe the classes need to become ids for that to work? or is there a getElementByClass function?Originally posted by DaveSW
you missed niket out...
I EDITED MY POST!!!
Originally posted by DaveSW
onClick="this.div.c1.style.color='red';"
Something like that maybe. Jona - you're the javascript expert! You'll probably need to modify the this to something else, but I don't know anything about javascript.
ps - the above message is code for 'I don't know'.
Hehe.. Well, you're pretty close, but what you're doing with that code would be simply editing the object's CSS properties, rather than the actual class.
Originally posted by Davw SW
Maybe the classes need to become ids for that to work? or is there a getElementByClass function?
I don't know how you could turn a class into an ID, do you?
There is no getElementByClass function--unfortunately.
JonaWould this be better?
onClick="document.div.c1.style.color='red';"
And no I don't know how to turn a class into an ID. Unless it only occurs once??
I'm actually struggling through the css2 spec to see if you can use A:hover+.c1{...}
I think A:hover.c1 would only do the child attributes.Hmmm... I don't think so, since it's not exaclty a child of the document object. Let me go test for a few minutes, and I'll report back with my findings.
JonaYou can use this.className to return the class name of the current object, and you can change it to a different class--but you can't edit the properties of a class. However, you can edit the properties of the object itself... The only problem with this, is if you wanted to completely change the page's classes, you'd have to loop through all of them or use the styleSheets[] array and use a different stylesheet.
JonaOriginally posted by DaveSW
I'm actually struggling through the css2 spec to see if you can use A:hover+.c1{...}
I think A:hover.c1 would only do the child attributes.
Eh? A:hover.c1 would specify a class for the A tag. So <a href=http://www.webdeveloper.com/forum/archive/index.php/"blah.html">Text</a> would be blue (if not visited, for me anyways) and <a href="blah.html" class="c1">Text</a> would be whatever color I specify in the class. Isn't this the same in CSS2?
JonaAlso, here is the code I tested the class thing with:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en"><head><title>Switching Classes</title>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<style type="text/css">
<!--
span.c1 {color:blue;}
span.c2 {color:red;}
-->
</style>
</head><body>
<p>Text... <span class="c1" onMouseOver="this.className='c2'" onMouseOut="this.className='c1'"> Blue or red text?</span></p>
</body></html>
JonaOriginally posted by Jona
Eh? A:hover.c1 would specify a class for the A tag. So <a href=http://www.webdeveloper.com/forum/archive/index.php/"blah.html">Text</a> would be blue (if not visited, for me anyways) and <a href="blah.html" class="c1">Text</a> would be whatever color I specify in the class. Isn't this the same in CSS2?
Jona
Yeah - but I'm sure I saw some css classes with a + sign between, which could possibly mean two classes for one action. maybe not!!
Is the code you posted supposed to work? all it does for me is the same as a hover tag would...
Maybe we should just say the answer is no...Originally posted by DaveSW
Yeah - but I'm sure I saw some css classes with a + sign between, which could possibly mean two classes for one action. maybe not!!
Oh you meant two classes? Hmm.. There's no telling. Probably not, I don't see much use of it because you could just use one class instead of two classes combined.
Originally posted by DaveSW
Is the code you posted supposed to work? all it does for me is the same as a hover tag would...
Maybe we should just say the answer is no...
The code does work. It's supposed to change the text color onMouseOver. What it's actually doing is changing the class from c1 to c2 onMouseOver, and reverses it onMouseOut. That's the best I could do--there is no way to edit a class.
[Jona]Originally posted by chuvak
Hi,
I was wondering whether I can access and change some things in one css class from another css class or javascript code.
For example:
div.c1 { color: red; ...}
a.c2:hover(or click) { make color in div.c1 green }
Can I also do the something like that from javascript? (if not change then at least get the value)
thanks in advance
Pure CSS solution is possible when div.c1 is a descendant of a.c2:
<a class="c2">Here is link <div class="c1"> Here is stuff I want to change</div></a>
In this case your css is:
div.c1 { color: red;}
a.c2:hover div.c1 { color: green;}
When the two are independent, you are better off defining 2 classes and changing the className of the div depending on action:Wow, Vladdy, I didn't even think about that (nesting it).
lol. [Jona]And if you define the position of your div as absolute you can actully make it appear completely independent from the anchor...thanks everybody