Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New Coder
    Join Date
    Jun 2004
    Posts
    95
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Is it possible to manipulate classes with Javascript?

    Is it possible to manipulate classes with Javascript?

  • #2
    Senior Coder
    Join Date
    Feb 2004
    Posts
    1,206
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #3
    New Coder
    Join Date
    Jun 2004
    Posts
    95
    Thanks
    0
    Thanked 0 Times in 0 Posts
    What I mean is, if you give an element a class, how would you be able to use it?

  • #4
    Senior Coder
    Join Date
    Feb 2004
    Posts
    1,206
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Are you talking about CSS? Like:
    Code:
     <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:
    Code:
     <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..

    Hope that helps,
    Sadiq.
    Last edited by sad69; 07-15-2004 at 01:07 AM. Reason: Added colouring...

  • #5
    New Coder
    Join Date
    Jun 2004
    Posts
    95
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #6
    New Coder
    Join Date
    Jun 2004
    Posts
    95
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay, how about this? If getElementById is for ID's, is there something similar for classes?

  • #7
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,074
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #8
    New Coder
    Join Date
    Jun 2004
    Posts
    95
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks!
    Last edited by ampulator00; 07-15-2004 at 04:06 AM.

  • #9
    New Coder
    Join Date
    Jun 2004
    Posts
    95
    Thanks
    0
    Thanked 0 Times in 0 Posts
    BTW:

    I'm try to get to work.. but it's not doing it properly.
    Here's the orginal code:
    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...

    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.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);
    	}

  • #10
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,074
    Thanks
    0
    Thanked 256 Times in 252 Posts
    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.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #11
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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....

    Code:
      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

  • #12
    New Coder
    Join Date
    Jun 2004
    Posts
    95
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oops, I didn't really understand what that did, but yeah, I forgot to. Thanks!

  • #13
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,074
    Thanks
    0
    Thanked 256 Times in 252 Posts
    If you follow the link in Simon's blog site, you will find Andy's code for that method.
    Code:
    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/2...dClassFetching
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #14
    New Coder
    Join Date
    Jun 2004
    Posts
    95
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •