how to append a css class to an element by javascript?


Tags: javascript,css

Problem :

Suppose a HTML element's id is known, so the element can be refereced using:

document.getElementById(element_id);

Does a native Javascript function exist that can be used to append a CSS class to that element?



Solution :

var element = document.getElementById(element_id);
element.className += " " + newClassName;

Voilà. This will work on pretty much every browser ever. The leading space is important, because the className property treats the css classes like a single string, which ought to match the class attribute on HTML elements (where multiple classes must be separated by spaces).

Incidentally, you're going to be better off using a Javascript library like prototype or jQuery, which have methods to do this, as well as functions that can first check if an element already has a class assigned.

In prototype, for instance:

// Prototype automatically checks that the element doesn't already have the class
$(element_id).addClassName(newClassName);

See how much nicer that is?!


    CSS Howto..

    how to change the opacity of the text along with the colorscale of the image in css?

    How to bottom center a span inside a list item

    How do stop elements from changing (properties) during javascript events?

    How to use HTC behavior in jQuery CSS for IE?

    how to add two widths to one class in css

    How to make styling and functioning of form elements get not to break in all browsers?

    How to modify twitter widget in css

    html/css, how to push an element on to the next line?

    HTTPS and how to reference files and images

    How to style all the same XSL FO elements? XSL FO like CSS?

    How would you explain CSS positioning to a human being?

    css How can I make the page body stay the same size even if I add element to it?

    how to get these two div's side by side in this container

    How to add a CSS specifc for Google Chrome? [duplicate]

    How can I push the primefaces DefaultMenuModel before an accordion panel?

    How to use CSS to increase the contrast on visited hyperlinks?

    What is the best CSS trick to reduce how much HTML you need?

    How to utilize css of this style in LESS?

    How to hide label on radio checked using css

    How can I stop divs getting pushed down?

    How to resolve css incompabilities/differences between different versions of IE?

    How can I wrap text around a bottom-right div?

    Jquery show/hide more data

    How to add a fade effect to html transition with javascript

    How to make a round mask over a image

    How can I remove a parent with a certain child inside of it (media queries)

    How to create straight line with same css gradient at both ends?

    How to center a rotated div inside a table element with a specific width?

    How to incorporate specific CSS files for Responsive Design for Desktop and Mobile Browsers

    htmlAttributes: How do I add a CSS class rule for the below?