2

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.

Improve this question
1
  • 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'; } Commented Nov 28, 2021 at 20:03

6 Answers 6

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

no need to assign an ID to the body. Simply use querySelector('body') or just document.body.
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.
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.

Improve this answer

1 Comment

Regarding id attributes on style tags... stackoverflow.com/questions/3797221/…
0

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

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

Improve this answer

Comments

0

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>

Improve this answer

Comments

-1

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

Improve this answer

1 Comment

You definitely can give style tags IDs, and there might be a few reasons you'd do it... stackoverflow.com/questions/3797221/…
-3

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>

Improve this answer

8 Comments

Consider adding explanations around your answers - the idea here is to educate and help people understand. Help them understand why their code isn't working
use id="1" attribute in the body tag
That isn't an explanation. That is saying what you did, but not addressing why you did it.
Actually you can put many different attributes in style tags - developer.mozilla.org/en-US/docs/Web/HTML/Element/style - you can use an ID attribute as well, if say, for some reason, you might want to remove that tag from the DOM.
no need to assign an ID to the body. Simply use querySelector('body') or just document.body.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.