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 9 of 9
  1. #1
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,179
    Thanks
    174
    Thanked 257 Times in 257 Posts

    [resolved] replacing class

    I have tried looking for this but im afraid my description is a bit too long for google!

    I have a div class that is in one element, for instance

    Code:
    .style1 {
    background-color:#ffffff;
    border:1px solid #000000;
    }
    then the element in html

    Code:
    <div class="style1"></div>
    So now that we have gone over basic css i move to my question.. Is there a way to take the current style1 in the div and use a javascript to place it with another style.

    Like if a user presses a buuton it will load a new style to that div..

    if there is a site or if anyone can point me in the right direction i would really appreciate it.

    Thanks guys

  • #2
    Regular Coder
    Join Date
    Jul 2002
    Location
    Kansas, USA
    Posts
    477
    Thanks
    0
    Thanked 51 Times in 50 Posts
    You can change the class of a given element by modifying its className property.
    Code:
    <style type="text/css">
    .style1 { background-color:#ffffff; border:1px solid #000000; }
    .style2 { background-color:#ffff00; border:1px solid #ff0000; }
    </style>
    <div class="style1" onclick="this.className='style2'">click me</div>
    If the element getting the style change is not the one getting clicked, you'll probably need to use getElementById to retrieve the right element.
    Code:
    <div class="style1" id="block1">
      <a href="#" onclick="document.getElementById('block1').className='style2';return false">
      click me</a>
    </div>

  • #3
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,179
    Thanks
    174
    Thanked 257 Times in 257 Posts
    I appreciate the help kansel, but what i am looking for is to have lets say 12 links, when clicked on all of the divs with classes change to the new class, do you understand what i mean?

  • #4
    Regular Coder
    Join Date
    Jul 2002
    Location
    Kansas, USA
    Posts
    477
    Thanks
    0
    Thanked 51 Times in 50 Posts
    There are several ways to do this. If all of the links are in the same parent container, use the cascade to achieve the effect.
    Code:
    <style type="text/css">
    .style1 div { background-color:#ffffff; border:1px solid #000000; }
    .style2 div { background-color:#ffff00; border:1px solid #ff0000; }
    </style>
    <div class="style1" id="parent" onclick="this.className='style2';return false">
      <div>
      <a href="#">
      click me</a></div>
      <div>
      <a href="#">
      click me</a></div>
      <div>
      <a href="#">
      click me</a></div>
    </div>
    If this is not what you want, do you have an example you could post?

  • #5
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,179
    Thanks
    174
    Thanked 257 Times in 257 Posts
    ok, im sorry im not good at explaining some things, the unfortunate thing is, is that my examples are on an intranet, so i cant give any passwords out, but let me do my best to give an example....

    here is an example css

    Code:
    * {
    margin:0px;
    padding:0px;
    }
    
    body {
    font-family:"Myriad Pro";
    background-color:#CCCCCC;
    }
    h3 {
    color:#000000;
    background-color:#00CCCC;
    }
    #container {
    margin:0 auto;
    width:800px;
    height:500px;
    background-color:#FFFFFF;
    }
    
    .style1{
    border:1px solid #000000;
    background-color:#FFFFFF;
    }
    .style2{
    border:1px solid #000000;
    background-color:#333333;
    }
    .style3{
    border:1px solid #000000;
    background-color:#666666;
    }
    Ok, as you can see i have 3 different styles as classes. So my default style would be style1...

    so here is what my html would look like when u enter the page

    Code:
    <body>
    <div id="container">
    
    <div class="style1">blah blah content</div>
    
    
    </div>
    </body>
    hopefully you are following me so-far...

    So now every thing is fine, now i know i realize i need a link lets say

    Code:
    <a href="#" onClick="function">Style 2</a>
    <a href="#" onClick="function">Style 3</a>
    ok so the user is able to change the div currently to a different style by clicking the link.

    Hopefully that is better as far as describing my problem, if not let me know and i will post an image maybe explaining it better, thanks abunch...

  • #6
    Regular Coder
    Join Date
    Jul 2002
    Location
    Kansas, USA
    Posts
    477
    Thanks
    0
    Thanked 51 Times in 50 Posts
    An image of what you want would help a lot. Before & after images would be even better.

  • #7
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,179
    Thanks
    174
    Thanked 257 Times in 257 Posts
    ok hopefully this will help, i mad it as clear as i can, if you can help or have any questions, just let me know
    Attached Thumbnails Attached Thumbnails [resolved] replacing class-javaexample.jpg  

  • #8
    Regular Coder
    Join Date
    Jun 2007
    Location
    USA
    Posts
    527
    Thanks
    26
    Thanked 74 Times in 72 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Test</title>
    <style type="text/css">
      .style1 {
        border: 1px solid #000;
        background-color: #fff;
      }
      .style2 {
        border: 1px solid #000;
        background-color: #333;
      }
      .style3 {
        border: 1px solid #000;
        background-color: #666;
      }
    </style>
    </head>
    <body><div>
    
    <script type="text/javascript">
    
    if(!Array.prototype.filter)
      Array.prototype.filter = function(f /*, context*/) {
        for(var r = [], i = 0, n = this.length, t = arguments[1], v; i < n; ++i)
          if(f.call(t, v = this[i], i, this))
            r.push(v);
        return r;
      };
    
    if(!Array.prototype.forEach)
      Array.prototype.forEach = function(f /*, context*/) {
        for(var i = 0, n = this.length, t = arguments[1]; i < n; ++i)
          f.call(t, this[i], i, this);
      };
    
    function changeClass(toClass) {
      Array.prototype.filter.call(document.getElementsByTagName("div"), function(el) {
        return /style\d+/.test(el.className);
      }).forEach(function(el) {
        el.className = toClass;
      });
    }
    
    </script>
    
    <div class="style1">div1</div>
    <div class="style1">div2</div>
    <div class="style1">div3</div>
    <ul>
      <li><a href="#" onclick="changeClass('style1');">Style 1</a></li>
      <li><a href="#" onclick="changeClass('style2');">Style 2</a></li>
      <li><a href="#" onclick="changeClass('style3');">Style 3</a></li>
    </ul>
    
    </div>
    </body>
    </html>
    Trinithis

  • #9
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,179
    Thanks
    174
    Thanked 257 Times in 257 Posts
    Thank you, im going to add this and see what happens, i will keep you updated...

    "Awsome it worked, thank you, i know it was a bit of a beat down, but thankyou for everyones suggestions!!"
    Last edited by jcdevelopment; 12-19-2007 at 05:00 PM.


  •  

    Posting Permissions

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