...

View Full Version : Is it possible to manipulate classes with Javascript?



ampulator00
07-15-2004, 12:30 AM
Is it possible to manipulate classes with Javascript?

sad69
07-15-2004, 12:49 AM
Would you care to elaborate on that question some more? What do you mean by manipulate?

You can use the prototype property to add methods and attributes to a class, if that's what you mean..
http://www.javascriptkit.com/javatutors/proto4.shtml

Hope that helps,
Sadiq.

ampulator00
07-15-2004, 12:53 AM
What I mean is, if you give an element a class, how would you be able to use it?

sad69
07-15-2004, 01:06 AM
Are you talking about CSS? Like:


<style>
.someClass {
color:blue;
}

.someOtherClass {
color:green;
}
</style>

<span class="someClass" id="mySpan">blah blah blah</span>


If you're talking about manipulating a class as in dynamically changing the style class of an element, you might do this:


<button onClick="document.getElementById('mySpan').className = 'someOtherClass';">change</button>


Does that answer your question? If not, you'll have to explain why and try to elaborate some more and not use vague terms, because as you can see you could have meant lots of different things and we don't read minds.. :p

Hope that helps,
Sadiq.

ampulator00
07-15-2004, 01:32 AM
I'll try. :)

what I mean is, get element/elements by class. Possible?

BTW: the set code of code you just wrote is still helpful. :thumbsup:

ampulator00
07-15-2004, 03:22 AM
Okay, how about this? If getElementById is for ID's, is there something similar for classes?

glenngv
07-15-2004, 03:42 AM
http://simon.incutio.com/archive/2003/03/25/getElementByClassName

ampulator00
07-15-2004, 03:53 AM
Thanks! :thumbsup:

ampulator00
07-15-2004, 04:09 AM
BTW:

I'm try to get to work.. but it's not doing it properly.
Here's the orginal code:


var thisAd = new Array( -1, -1);
var cutinID = new Array("cutin1", "cutin2");
var uccutin = new Array("amuro2cutin.gif", "quattrocutin.gif", "camillecutin.gif", "judaucutin.gif", "amuro3cutin.gif");
var accutin = new Array("heerocutin.gif", "garrodcutin.gif", "domon2cutin.gif");

function cycle()
{
if(document.getElementById(cutinID[0]).complete)
{
thisAd[0]++;
if(thisAd[0] == time[0])
{
thisAd[0] = 0;
}
document.getElementById(cutinID[0]).src = cutinChoice[0][thisAd[0]];
}
setTimeout("cycle()" , 2 * 1000);
}

function cycle2()
{
if(document.getElementById(cutinID[1]).complete)
{
thisAd[1]++;
if(thisAd[1] == time[1])
{
thisAd[1] = 0;
}
document.getElementById(cutinID[1]).src = cutinChoice[1][thisAd[1]];
}
setTimeout("cycle2()" , 2 * 1000);
}



But this set doesn't work...



var thisAd = new Array( -1, -1);
var cutinID = new Array("cutin1", "cutin2");
var uccutin = new Array("amuro2cutin.gif", "quattrocutin.gif", "camillecutin.gif", "judaucutin.gif", "amuro3cutin.gif");
var accutin = new Array("heerocutin.gif", "garrodcutin.gif", "domon2cutin.gif");

function cycle()
{
if(document.getElementsByClassName(cutinID[0]).complete)
{
thisAd[0]++;
if(thisAd[0] == time[0])
{
thisAd[0] = 0;
}
document.getElementsByClassName(cutinID[0]).src = cutinChoice[0][thisAd[0]];
}
setTimeout("cycle()" , 2 * 1000);
}

function cycle2()
{
if(document.getElementsByClassName(cutinID[1]).complete)
{
thisAd[1]++;
if(thisAd[1] == time[1])
{
thisAd[1] = 0;
}
document.getElementsByClassName(cutinID[1]).src = cutinChoice[1][thisAd[1]];
}
setTimeout("cycle2()" , 2 * 1000);
}

glenngv
07-15-2004, 04:25 AM
Did you add the document.getElementsByTagName code in yours?
And that method returns an array of the elements that have the specified class. So you have to access each element by index.

Willy Duitt
07-15-2004, 04:27 AM
You must not have read Simons blog very carefully...
There is no such builtin function as getElementsByClassName()

You need to write the function yourself starting with either the tagName you are expecting to find the className in, or loop thru all of the elements on the page....



function getElementsByClassName(){
if(!document.getElementById){ return };
var element = document.getElementsByTagName('*');
for(var i=0; i<element.length; i++){
if(element[i].getAttribute('className').match(/myClassName/gi)){
//yada yada yada......

}
}
}


.....Willy

ampulator00
07-15-2004, 04:46 AM
Oops, I didn't really understand what that did, but yeah, I forgot to. Thanks! :thumbsup:

glenngv
07-15-2004, 04:51 AM
If you follow the link in Simon's blog site, you will find Andy's code for that method.


document.getElementsByClassName = function ( class_name ) {
var all_obj, ret_obj = new Array(), j = 0, strict = 0;
if ( document.getElementsByClassName.arguments.length > 1 )
strict = ( document.getElementsByClassName.arguments[1] ? 1 : 0 );
if ( document.all )
all_obj = document.all;
else if ( document.getElementsByTagName && !document.all )
all_obj = document.getElementsByTagName ( "*" );
for ( i = 0; i < all_obj.length; i++ ) {
if ( ( ' ' + all_obj[i].getAttribute("class") + ' ').toLowerCase().match(
new RegExp ( ( strict ? '^ ' + class_name.trim() + ' $' :
'^.* ' + class_name.trim() + ' .*$' ).toLowerCase(),'g' ) ) ) {
ret_obj[j++] = all_obj[i];
}
}
return ret_obj;
}

http://blog.mooncalf.me.uk/archive/2003/03/25/RefinedClassFetching

ampulator00
07-15-2004, 05:00 AM
thanks!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum