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
    Regular Coder mlse's Avatar
    Join Date
    Mar 2005
    Posts
    624
    Thanks
    20
    Thanked 19 Times in 18 Posts

    Question How do I change part of an element's class using Javascript?

    Hi.

    I have some Javascript knocking around that I wrote a while ago.

    In essence, what it does is to change certain style attributes of elements referenced by ID when a button is pressed.

    For example:
    Code:
    Javascript:
    function doChange(id)
    {
      document.getElementById(id).style.color="#FF0000";
      document.getElementById(id).style.background-color="#00FF00";
      document.getElementById(id).style.border-color="#0000FF";
      /* and other stuff */
    }
    
    HTML:
    <div id="thediv" class="theclass">
      <p>Some Text Here</p>
      <input type="button" value="click me" onclick="doChange('thediv');">
    </div>
    
    CSS:
    DIV.theclass {
      border:2px solid;
      margin:100px 20px;
      padding:70px;
    }
    Ok, this works fine, but what I would like to do is to be able to remove style information from the Javascript in order to make the script more generic.

    Last example modified to show what I want to do:
    Code:
    Javascript:
    function changeTheClass(obj, oldclass, newclass)
    {
       /* *** The magic class-changing code goes here! *** */
    }
    
    function doChange(id, oldclass, newclass)
    {
      changeTheClass(document.getElementById(id), oldclass, newclass);
      /* and other stuff */
    }
    
    HTML:
    <div id="thediv" class="theclass beforehand">
      <p>Some Text Here</p>
      <input type="button" value="click me" onclick="doChange('thediv', 'beforehand', 'afterwards');">
    </div>
    
    CSS:
    DIV.theclass {
      border:2px solid;
      margin:100px 20px;
      padding:70px;
    }
    
    DIV.beforehand{
      color:#FFFFFF;
      background-color:#999999;
      border-color:#000000;
    }
    
    
    DIV.afterwards{
      color:#FF0000;
      background-color:#00FF00;
      border-color:#0000FF;
    }
    The burning question is ... what is the magic code that goes in the changeTheClass function?? It must be able to change the class from "beforehand" to "afterwards" while preserving other class information (i.e. it must be able to change the class of the div from "theclass beforehand" to "theclass afterwards" - hence why I have included both "oldclass" and "newclass" in the function prototype - the function will need to know which part of the class specification to change!).

    I know what I want to do, I just don't know the syntax! Any help on this much appreciated!

    TIA,
    Mike.
    Die Welt ist ein Irrenhaus und hier ist die Zentrale!

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,503
    Thanks
    3
    Thanked 500 Times in 487 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    
    function CngClass(obj,nc){
     if (!obj.cngclass){
      obj.cngclass=obj.className;
     }
     if (obj.className==nc){
      obj.className=obj.cngclass;
     }
     else {
      obj.className=nc;
     }
    
    }
    //-->
    </script>
    
    <style type="text/css">
    <!--
    .fred {
     background-color:red;
    }
    
    .tom {
     background-color:blue;
    }
    
    -->
    </style></head>
    
    <body>
    
    <div class="fred" style="width:100px;height:100px;"
    onclick="CngClass(this,'tom');"
    ></div>
    </body>
    
    </html>

  • #3
    Regular Coder
    Join Date
    Sep 2005
    Posts
    535
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Actually, what I think mlse will need in the changeClass function is to use the regular expression's replace() method to "search" the className for oldClass and then replace it with newClass. I'm away from a server where I could draft and test some code, but I know that there was a "suckerfish" script for adapting the :hover pseudo-class to work in IE that used a similar principle:
    PHP Code:
    sfHover = function()

      var 
    sfEls document.getElementById("nav").getElementsByTagName("LI");
      for (var 
    i=0i<sfEls.lengthi++)
      {
        
    sfEls[i].onmouseover=function() 
        {
          
    this.className+=" sfhover";
        }
        
    sfEls[i].onmouseout=function()
        {
          
    this.className=this.className.replace(new RegExp("sfhover\\b"), ""); 
        }
      }
    }
    if (
    window.attachEventwindow.attachEvent("onload"sfHover); 
    In this script, "sfhover" is the newClass when onmouseover and is oldClass when onmouseout (actually, the replace() in the onmouseout is probably the closest to what you are looking for). I think you can get what you want by adapting this and VWP's script... If you have trouble, let us know; I should be able to help out more tomorrow when I'm actually at my server...
    If you want answers, write a smart question.

    Yes, someone probably does know how...

    Oh, and if you want to learn, STFW!

  • #4
    Regular Coder mlse's Avatar
    Join Date
    Mar 2005
    Posts
    624
    Thanks
    20
    Thanked 19 Times in 18 Posts
    Hi guys,

    Thanks for your responses! There is certainly enough info there for me to figure it out I reckon!

    Thanks,
    Mike.
    Die Welt ist ein Irrenhaus und hier ist die Zentrale!


  •  

    Posting Permissions

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