How to apply CSS to HTML body element?


Tags: javascript,html,css,xhtml,css3

Problem :

I am trying to get rid of this:

document.body.className = "someclass";

I want to do this in CSS.

body.someclass {
.
.
.
}

unfortunately I am not able to get this working in Firefox, chrome.

Am I doing anything wrong here? Is there any way we could apply a CSS class to body?



Solution :

You are doing two different things there. Your JavaScript is actually assigning the class "someclass" to your body element, while your CSS is styling a body element with the class "someclass", it won't assign the class to it, that is not the task of CSS. You would do it in plain (X)HTML like this:

<body class="someclass">

    CSS Howto..

    Show separation between newlines in textarea

    Gulp Sass - How to properly name the output css?

    How to create automatic image gallery slideshow by using HTML,CSS and JavaScript

    How to construct multilevel menu using CSS only?

    How to expand wrapper when content is more?(with CSS)

    How do I create a pattern overlay in CSS

    how to deselect the active span element?

    How to use fallback values for `display` property in CSS?

    How to disable a YUI MenuBarItem from markup

    same button for show/hide in jquery

    How do I make my images in my div change opacity on hover?

    How do I format code neatly in HTML/CSS ? I especially want to use the numerical circle callouts, with Python Docutils if I can

    How can I create a color with values for green, blue, orange, and gold only?

    How to Make DD Wrap under DT When DD Content has No Spaces

    How to position two images in opposite corners of one div

    How to float left without wrapping to next line?

    IE11 shows every display: table-cell element at a new line

    How quora put that image on their home page? [closed]

    How to get :before selector behind its box?

    How is a CSS “display: table-column” supposed to work?

    How to change colour of Bootstrap scroll spy and why won't my logos resize?

    How to restrict the css star selector * to a class and all decendants?

    How to let Fancybox Next and Previous button stay visible

    CSS `will-change` - how to use it, how it works

    How do I indent elements? Example in details

    How to highlight the menu item for the sort type of data on the page?

    How to get this code to behave differently based on what exactly is clicked?

    How do I make a hamburger menu display on the right side?

    css animation how to get the ball to bounce

    How do I maintain modularity with mixins?