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 4 of 4
  1. #1
    New Coder
    Join Date
    Nov 2005
    Posts
    66
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Question Javascript "Classes"

    I'm a noob when it comes to javascript. Excuse my ignorance!

    Is there any way to replicate the CSS version of "class" for javascript?

    Say I have like seventeen elements that I want to all use the same javascript:
    Code:
    onmouseover="this.style.backgroundColor='#e6e6e6'; this.style.cursor='pointer';" onmouseout="this.style.backgroundColor='#FFFFFF';" onclick="toggle('type'); toggle('mail')
    It would be a pain to copy all of those into each div/table/td etc. Isn't there a way to replicate this kind of functionality: class="toggle" to make it easier?

    I searched some ways on Google and found some good ways of doing stuff through functions... but not really what I was looking for.
    Last edited by Xibe; 02-02-2009 at 08:16 PM.

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,349
    Thanks
    11
    Thanked 589 Times in 570 Posts
    don't copy repetive stuff into html, it usually just adds messiness and bloat.


    you can use a class or name to group the elements, or just make a list of their id's, or collect each tag under a common parent.

    once you have a group of tags selected, upgrade them in a loop when the page loads.

    you the onload event as a chance to cycle through the tags, adding style, classes, and events to each tag.

    the html in your document doesn't need to change to expand the functionality; you only have to modify the group of tags you modify onload.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #3
    New Coder
    Join Date
    Nov 2005
    Posts
    66
    Thanks
    8
    Thanked 0 Times in 0 Posts
    I'm sorry... I don't understand what you're saying I should do.

    upgrade them in a loop when the page loads
    How do I do that? What does it mean to upgrade them in a loop?

    you the onload event as a chance to cycle through the tags, adding style, classes, and events to each tag.
    What do you mean by this?

  • #4
    New Coder
    Join Date
    Feb 2009
    Location
    Jakarta, Indonesia
    Posts
    93
    Thanks
    2
    Thanked 20 Times in 20 Posts
    Hi,

    I'm a newbie too. Is this help?

    Code:
    <html>
    <head>
    <script language="javascript">
    function fnMover(){
    this.style.background="#06f";
    }
    function fnMout(){
    this.style.background="#fff";
    }
    function cls(sObj,sCls,sE1,sE2){
    var o = document.getElementsByTagName(sObj);
    	for(j=0;j<o.length;j++){
    		if(o[j].className==sCls){
    			// netscape
    			o[j].addEventListener(sE1,fnMover,false);
    			o[j].addEventListener(sE2,fnMout,false);
    		}
    	}
    }
    
    window.onload=function(){
    cls("p","prg","mouseover","mouseout");
    }
    </script>
    </head>
    <body>
    <p class="prg">par 1</p>
    <p class="prg">par 2</p>
    </body>
    </html>


  •  

    Tags for this Thread

    Posting Permissions

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