www.webdeveloper.com
Results 1 to 7 of 7

Thread: Using Javascript to add CSS class

  1. #1
    Join Date
    Oct 2006
    Posts
    11

    Using Javascript to add CSS class

    I've been using JS to swap style properties for a while now...
    like so...
    function ShowUp() {
    document.getElementById( 'Name' ).style.visibility='visible';
    }

    But, now I need to change a Class, not an ID, and I need to add CSS class names to an object using JS.
    my style sheet looks something like this (fake).
    (pretend CSS)
    .something {
    something:somethingelse;
    }
    .different {
    different:moredifferent;
    }

    When called, I then want JS to change the CSS Style class from...
    .something
    into...
    .something.different

    <span class=".something"></span>
    would become
    <span class=".something.different"></span>

    Lost in code...

    Micah

  2. #2
    Join Date
    Jan 2007
    Location
    USA
    Posts
    5
    As usual, IE is a little different than every other browser, but here's a quick and easy way to do it.

    Code:
    function changeClass (elementID, newClass) {
    	var element = document.getElementById(elementID);
    	
    	element.setAttribute("class", newClass); //For Most Browsers
    	element.setAttribute("className", newClass); //For IE; harmless to other browsers.
    }
    Make sure you pass the elementID in quotes when you call the function, and that the id attribute is defined for the element.

  3. #3
    Join Date
    Jan 2005
    Location
    Los Angeles, CA
    Posts
    4,887
    Actually it is the same cross-browser.
    Code:
    e.className=newClass;

  4. #4
    Join Date
    Feb 2006
    Posts
    2,927

    Modifying a class declaration

    micahs question doesn't match his title- I don't believe it is the element's class name but the actual class he wants to modify.


    If this is so, micah, I suspect you must have used classes in a different programming language than javascript. In most languages, class is a kind of super object that can be the ancestor of other objects, but in javascript- that is, in the html javascript interpreter, it can only contain a string.

    In IE and firefox you can manipulate the document.styleSheets object and add, remove or edit the class declarations, but many browsers don't support this, and IE and firefox don't do it in the same way. It is the closest approach to what you want to do, however.

    The easiest way (that works in the most browsers) to modify a class with runtime defined styles is to redeclare the class and put the css text for the declaration in a new style element, appended to the head of the document.

    This works in most browsers. You might use it to do a rewrite of one or several classes, to set up a user stylesheet, say, but you don't want to be using this technique often. It adds some overhead, and can cause the page to flicker, depending on the changes you define.

    While you can't call oldclass.newclass to ammend a class declaration,
    you can add any class already defined to the element's className attribute.
    Use element.className='oldclass newclass';
    or element.className+=' newclass'; ( with a leading space in the string)
    Anything from oldclass that newclass does not redefine will still be in effect.

    Because while the class property is apparently a text string, browsers split the string on spaces, and apply each individual class, in the order it appeared in the string.
    Last edited by mrhoo; 01-14-2007 at 11:35 PM.

  5. #5
    Join Date
    Oct 2006
    Posts
    11

    Refine Question

    Thanks for all the feedback thus far - it's been REALLY insightful.

    Here's a more direct way of stating my problem.

    I have a couple of classes that need to be added/removed from different elements.

    .first { width: 10;}
    .second { background: #FFFFFF;}
    .third { height: 10;}
    etc..

    so when I have a element that uses that style it looks like this.
    <tr id="r1" class="first second">stuff</tr>
    <tr id="r2" class="third">more stuff</tr>

    I need to change the class elements for individual rows.
    So...
    class="first second"
    needs to change to
    class="third second"
    or
    class="first third"

    Any ideas? I'm more of a jr level JS programmer so assistance is appreciated.

    Micah
    Last edited by micahzender; 01-16-2007 at 09:24 AM.

  6. #6
    Join Date
    Feb 2006
    Posts
    2,927
    If you have multiple classNames whose order is important, split the element's className on spaces and work with the array,using Array methods like splice, push, pop; and then join the array with spaces to set the new className.

    If the order doesn't matter, you can use String methods to replace or concatenate classNames-just remember to space delimit the names.

  7. #7
    Join Date
    Oct 2006
    Posts
    11
    Sounds like my arch nemisis the array is needed

    Unfortuneatly the class order needs to be formatted properly.
    In CSS using classes, order is important... (i'll illustrate, in the extreme off chance you don't know this - and to repeat this for others to read/learn and forget!)
    We have two CSS Classes.
    .first {
    color: #FFFFFF;
    font-weight: bold;
    }

    and

    .second {
    font-weight: normal;
    }

    You have the 'font-weight' style object being used twice, in CSS the order they appear will determine which shows up.
    class="first second" will make the text normal.
    class="second first" will make the text bold.

    Simple nuff.

    I'll keep poking at the code i'm working on - that isn't working - and possibly post it here if I think I won't be laughed at for how reed-ick-u-lous it is!

    Micah

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles