Javascript add class and keep original

Question

Im using the following:

url=location.href
fname=url.match(/.*\/(.*)\./)[1]
document.body.className=fname

This takes part of the URL and adds a class to the <body> tag with the text extracted from the URL.

However the problem with this method is the class only gets applied providing doesnt already have a class assigned.

Im really looking for something similar to the JQUERY .addClass function so body becomes:

<body class="originalClass filenameClass">

...

</body>

Ariel · Accepted Answer

You don't have to replace the class, just append to it like this:

document.body.className += " " + fname

You may want to run some validation though on everything that arrives via querystring...

DMTintner · Answer

According to the specs

classList returns a token list of the class attribute of the element.

So you can do:

document.body.classList.add(fname);

and it will work just like jQuery's addClass method. Only adding the class once and keeping existing classes.

You can also do:

document.body.classList.remove(fname);

if you'd like to remove the class later

toggle and contains methods are also available natively

Donate For Us