CODEWITHSUNDEEP
javascriptjquery
CLiown
CLiown

Reputation: 13843

Javascript add class and keep original

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>

Upvotes: 5

Views: 4885

Answers (4)

DMTintner
DMTintner

Reputation: 14729

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

Upvotes: 6

Aly
Aly

Reputation: 16255

With JQuery you can do $("body.className").addClass(fname) or similarly without JQuery you can do document.body.className += " " + fname

Upvotes: 1

Ariel
Ariel

Reputation: 4500

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...

Upvotes: 10

Yaakov Shoham
Yaakov Shoham

Reputation: 10548

document.body.className+=" "+fname

Upvotes: 3

Related Questions