CODEWITHSUNDEEP
javascripthtmlcss
user1223695
user1223695

Reputation: 53

IF statement around styles

I was wondering if it is possible to do this? Page is in HTML, uses javascript

I have left navgation which uses a style On certain pages I want to use another style so I have created a new class

so what I want to do is:

if page = a
display leftmenu class
else
display
left class

Can someone help me with the code so that it will work?

Upvotes: 0

Views: 263

Answers (5)

Matt Gibson
Matt Gibson

Reputation: 14949

Assuming you want to use JavaScript, like you suggest:

var page = 'whereveryougetpagefrom';
var elementToStyle = document.getElementById('nameofelement');

if (page == 'a') {
    elementToStyle.className += " leftmenu";
} else {
    elementToStyle.className += " left";
}

However, this is best done in CSS using styles.

Upvotes: 2

powerbuoy
powerbuoy

Reputation: 12838

I always have an id on the html element that represents the current page, something like:

<html id="home-page">, <html id="about-page">

etc.

With that at hand you can easily accomplish what you're after using:

div.leftmenu {general styling}

#about-page div.leftmenu {styling specific to the About page}

Also, leftmenu is a really bad name. What if you want it on the right on the #home-page?

Upvotes: 0

Blender
Blender

Reputation: 298176

Just add an ID to your body tag:

<body id="a">

Then add styles:

body h1 {
  color: black;
}

body#a {
  color: red;
}

Upvotes: 0

Jeffrey Sweeney
Jeffrey Sweeney

Reputation: 6124

Unless it's dynamic, using a server-sided language would probably make more sense for what you're trying to achieve.

You could send the prefered style through a get variable.

If you are trying to do this dynamically, clicking a link can change element's className.

var elem = document.getElementById('sidebar');
elem.className = 'leftmenu'

Upvotes: 0

Marc B
Marc B

Reputation: 360682

body div.leftmenu {
   styles for other non-display pages
}

body.display div.leftmenu {
   styles for left menu on a 'display' page
   override any styles defined above
}

Upvotes: 3

Related Questions