Dynamically Adding/Removing Classes

Discussion in 'Javascript' started by tomlong@gmail.com, Feb 3, 2006.

  1. Guest

    In my last job we had a crummy function that did regex to add/remove
    css classes to an element.

    Does anyone have a better way to do this? Techniques or code would be
    great. I'm almost surprised this isn't in prototype.js after finding
    Element.cleanWhiteSpace(el) today.

    Thanks!
    Tom Longson (nym)
    http://igargoyle.com/
    , Feb 3, 2006
    #1
    1. Advertising

  2. RobG Guest

    wrote:
    > In my last job we had a crummy function that did regex to add/remove
    > css classes to an element.
    >
    > Does anyone have a better way to do this? Techniques or code would be
    > great. I'm almost surprised this isn't in prototype.js after finding
    > Element.cleanWhiteSpace(el) today.



    <style type="text/css">
    .red {color: red;}
    .bb {font-weight: bold;}
    .uu {text-decoration: underline;}
    </style>


    <script type='text/javascript'>

    function deleteCSSClass(el, cssClass)
    {
    var c = el.className;
    var re = new RegExp('\\b' + cssClass + '\\b','g');
    if (c) el.className = cleanClassWhitespace( c.replace(re, '') );
    }

    function addCSSClass(el, cssClass)
    {
    el.className += ' ' + cssClass;
    }

    function cleanClassWhitespace(s)
    {
    return s.replace(/^\s+/,'').replace(/\s+/g,' ').replace(/$\s+/,'');
    }

    </script>


    <span onclick="deleteCSSClass(this, 'red');" class="bb red uu">
    click to remove .red class
    </span>



    --
    Rob
    RobG, Feb 3, 2006
    #2
    1. Advertising

  3. Guest

    That's great. Here's one addition that makes it a tiny bit better (but
    not by much). All I did was add a check to see if the className was
    already there so if you add a class more than once, you don't have to
    remove it multiple times.

    function addCSSClass(el, cssClass)
    {
    if(el.className.indexOf(cssClass) == -1) {
    el.className += ' ' + cssClass;
    }
    }
    , Feb 6, 2006
    #3
  4. RobG Guest

    wrote:
    > That's great. Here's one addition that makes it a tiny bit better (but
    > not by much). All I did was add a check to see if the className was
    > already there so if you add a class more than once, you don't have to
    > remove it multiple times.
    >
    > function addCSSClass(el, cssClass)
    > {
    > if(el.className.indexOf(cssClass) == -1) {
    > el.className += ' ' + cssClass;
    > }
    > }


    Yes, good idea. You should use a regular expression to ensure you match
    whole words, indexOf will match 'blah' in 'blah' and 'blah2':

    function addCSSClass(el, cssClass)
    {
    var re = new RegExp('\\b' + cssClass + '\\b');
    if(!re.test(el.className)) {
    el.className += ' ' + cssClass;
    }
    }



    --
    Rob
    RobG, Feb 6, 2006
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Carfield Yim
    Replies:
    1
    Views:
    1,417
    Andrew Thompson
    May 31, 2004
  2. Max Derkachev
    Replies:
    4
    Views:
    672
    Jack Diederich
    May 5, 2005
  3. Collin Winter

    Dynamically adding and removing methods

    Collin Winter, Sep 24, 2005, in forum: Python
    Replies:
    11
    Views:
    457
    Ron Adam
    Sep 29, 2005
  4. Chris  Chiasson
    Replies:
    6
    Views:
    612
    Richard Tobin
    Nov 14, 2006
  5. Replies:
    3
    Views:
    300
    Steven D'Aprano
    Sep 12, 2007
Loading...

Share This Page