CODEWITHSUNDEEP
javascript
Ingo
Ingo

Reputation: 89

Javascript change html or body css

I use in my webpage the css description

    body {
    font-size: 12px;
    font-family: Sans-Serif;
    background: url(images/diffdummy.png) no-repeat center center fixed;
    overflow: hidden;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

How I can remove the background image with java script on runtime? I tried 

document.getElementById("html").style.background="";
document.getElementsByTagName("html").style.background="";
document.getElementsByTagName("html")[0].style.background="";

But nothing is working. Anybody here who can give me a hint?

Upvotes: 6

Views: 13165

Answers (2)

Facundo Colombier
Facundo Colombier

Reputation: 3650

just to remove the background image should do like:

document.body.style.backgroundImage = "none";

to avoid i.e. removing background-color or other css props that might be applied to just background

Upvotes: 0

Danyal Imran
Danyal Imran

Reputation: 2605

Why html when you are using body as your CSS selector?

just use:

document.getElementsByTagName('body')[0].style.background = "none";

or 

document.body.style.background = "none";

Code in action!

// removing background-color from body
document.getElementsByTagName('body')[0].style.background = "none";
body {
  height: 100px;
  width: 100%;
  background-color: red;
}

div {
  height: 40px;
  width: 20%;
  background-color: green;
}
<body>
 <div></div>
</body>

Upvotes: 15

Related Questions