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.
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.
Share Improve this question edited Dec 15, 2024 at 21:43 Ry-♦ 226k56 gold badges493 silver badges499 bronze badges asked Nov 28, 2021 at 20:00 Hello manHello man 1173 silver badges13 bronze badges 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"ordocument.querySelector("body").classList.add("brown")(and then have a css style set for.brown{ background-color:'brown'; }– Kinglish Commented Nov 28, 2021 at 20:03
6 Answers
Reset to default 4You 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.
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.
Here is how I'd change the body's background color with javascript.
document.querySelector("body").style.backgroundColor = "brown";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>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
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>发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744967169a4603751.html
评论列表（0条）