CODEWITHSUNDEEP
javascriptvolusion
J82
J82

Reputation: 8457

How can I dynamically add a class to 'body' using JavaScript only for the home page?

I added this to the head, but it's not working:

<script>
var xpathname = (window.location.pathname);
if (xpathname ==('/')) {
$('body').addClass('home');
}
</script>

The site is here: http://xotdr.unxpr.servertrust.com/

Volusion doesn't allow developers to code freely so there are a lot of workarounds that I need to implement, unfortunately.

Edit: I want the class to show only on the home page body.

Upvotes: 1

Views: 10840

Answers (5)

Ashish Gope
Ashish Gope

Reputation: 320

I know it's a old post, but the question will remain useful. 

var xpathname = (window.location.pathname);
var ndeBody = document.getElementsByTagName("body")[0];
if (xpathname ==('/')) {
    ndeBody.classList.toggle("home");
}
else{
    ndeBody.classList.toggle("home");
}

Upvotes: 0

CRABOLO
CRABOLO

Reputation: 8793

Give this a try 

var b = document.getElementsByTagName('body')[0];
b.className += 'home';

Upvotes: 1

David Lam
David Lam

Reputation: 4948

When I go to that URL you have syntax error:

 Uncaught ReferenceError: x$ is not defined

e.g. you want to delete the x in x$('body').addClass('home');

Upvotes: -1

dfsq
dfsq

Reputation: 193301

Since you added this to the head you need to execute this snippet when body tag is available:

$(function() {
    var xpathname = window.location.pathname;
    if (xpathname == '/') {
        $('body').addClass('home');
    }
});

Upvotes: 3

davidcondrey
davidcondrey

Reputation: 36043

<script>
    var bodyclass=document.createAttribute("class");
    bodyclass.value="home";
    document.getElementsByTagName("body")[0].setAttributeNode(bodyclass);
</script>

Upvotes: 2

Related Questions