CODEWITHSUNDEEP
javascripthtmlcss
Hello man
Hello man

Reputation: 117

How to change in javascript background color from css

I'm having problems changing the css in javascript. Here's what i tried making:

<style id="1">
body {
background-color: pink;
}
</style>

<script>
var myVar = document.getElementById("1").style.backgroundColor = "brown";
</script>

The css is working, it is making the background pink, but the javascript isn't changing the css background color to brown.

Upvotes: 2

Views: 7918

Answers (6)

Leandro Bardelli
Leandro Bardelli

Reputation: 11578

You have to set up the property over the selected element, in this case myVar

Also tags should be in HTML, not in style:

var myVar = document.getElementById("1");
myVar.style.backgroundColor = "brown";
<body id="1">
  ok
</body>

Upvotes: 0

Rocky Sims
Rocky Sims

Reputation: 3598

Here is how I'd change the body's background color with javascript.

document.querySelector("body").style.backgroundColor = "brown";

Upvotes: 0

JrWebDev
JrWebDev

Reputation: 126

you cant give the style Tag an ID. It is used to style the page inside the html file. And Body Tag is always unique. So you should not give that tag an ID. Just try to get the body tag in your javascript and change the background-color.

thx Kinglish for your information

Upvotes: -1

jbritain
jbritain

Reputation: 104

You are attempting to set the background colour of the <style> tag. This is not how it works. Instead of setting the style of the <style> tag, you should set the style of the body itself. This W3Schools Article gives an explanation if you need one.

<head>
    <style>
        body {
            background-color: pink;
        }
    </style>
</head>

<body id="1">

    <script>
        document.getElementById("1").style.backgroundColor = "brown";
    </script>
</body>

It's also worth noting you don't need to assign the element to a variable unless you are going to use it later.

Upvotes: 4

Proking73Questioneer
Proking73Questioneer

Reputation: 137

Use document.body.style.backgroundColor = "brown";, you can't put ids' or classes on non-elements. Try this;

var myVar = document.body.style.backgroundColor = "brown";
body {
background-color: pink;
}

This selects the body element, you could also put id = "1" on the body element.

Upvotes: 1

Anonymous
Anonymous

Reputation: 557

You can try This :

var myVar = document.getElementById("1").style.backgroundColor = "brown";
 body {
          background-color: pink;
       }
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
</head>
<body id="1">
      
</body>
</html>

Upvotes: -2

Related Questions