1

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.

Hello man
  • 53
  • 1
  • 11
  • 4
    That's not how it works. You would change the style on an element, or apply a new class to an element. You would not try and edit the stylesheet directly through script. `document.querySelector("body").style.backgroundColor = "brown"` or `document.querySelector("body").classList.add("brown")` (and then have a css style set for `.brown{ background-color:'brown'; }` – Kinglish Nov 28 '21 at 20:03

6 Answers6

3

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.

jbritain
  • 94
  • 4
  • 1
    no need to assign an ID to the body. Simply use `querySelector('body')` or just `document.body`. – tacoshy Nov 28 '21 at 21:01
  • 1
    This is true, however in this case I felt that the OP would probably be more confused if we threw that in there, especially since the question can be applied more broadly to styling elements with JS. – jbritain Nov 28 '21 at 22:40
1

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.

Proking73Questioneer
  • 117
  • 1
  • 9
  • 1
    Regarding id attributes on style tags... https://stackoverflow.com/questions/3797221/why-would-you-give-a-style-tag-an-id – Kinglish Nov 28 '21 at 20:13
0

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

var myVar = document.getElementById("1");
myVar.style.backgroundColor = "brown";

Also tags should be in HTML, not in style:

<html>
<body  id="1">
ok
</body>
</html>
Leandro Bardelli
  • 10,561
  • 15
  • 79
  • 116
0

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

JrWebDev
  • 128
  • 9
  • 1
    You definitely can give style tags IDs, and there might be a few reasons you'd do it... https://stackoverflow.com/questions/3797221/why-would-you-give-a-style-tag-an-id – Kinglish Nov 28 '21 at 20:10
0

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

document.querySelector("body").style.backgroundColor = "brown";
Rocky Sims
  • 3,523
  • 1
  • 14
  • 19
-1

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>
Anonymous
  • 539
  • 2
  • 6