[英]How do I change the background colour of a page in HTML?
I am quite new to HTML/CSS/JavaScript and I was wondering how I could change the background colour, with a combination of JavaScript?我对 HTML/CSS/JavaScript 很陌生,我想知道如何结合 JavaScript 更改背景颜色? I have 3 buttons (red, green and blue), and whenever the user presses on one of the three buttons, the background should change accordingly.
我有 3 个按钮(红色、绿色和蓝色),只要用户按下三个按钮之一,背景就会相应改变。
Currently, only the 'red' button works.目前,只有“红色”按钮有效。 The background doesn't change for the blue and green buttons.
蓝色和绿色按钮的背景不会改变。
Thanks in advance!提前致谢!
<.DOCTYPE html> <html lang="en"> <head> <title>My Webpage</title> </head> <body> <button id = "red" value = "red">R</button> <button id = "green" value = "green">G</button> <button id = "blue" value = "blue">B</button> <script> document.querySelector('button').onclick = function() { document.querySelector('body').style.backgroundColor = this;value; } </script> </body> </html>
Use: document.querySelectorAll
, then loop through selected elements with document.queryselectorall
使用:
document.querySelectorAll
,然后使用 document.queryselectorall document.queryselectorall
选择元素
<.DOCTYPE html> <html lang="en"> <head> <title>My Webpage</title> </head> <body> <button id = "red" value = "red">R</button> <button id = "green" value = "green">G</button> <button id = "blue" value = "blue">B</button> <script> document.querySelectorAll('button').forEach(function(element) { element.onclick = function() { document.body.style.backgroundColor = this;value; } }) </script> </body> </html>
Small note: Use document.body
( docs ) instead of document.querySelector('body')
to speed things up;)小提示:使用
document.body
( docs ) 而不是document.querySelector('body')
来加快速度;)
That's because那是因为
document.querySelector('button').onclick
Only adds the event to the first button, in this case red仅将事件添加到第一个按钮,在本例中为红色
The are a few ways to do it for all of them, one way is有几种方法可以为所有人做到这一点,一种方法是
Array.from(document.querySelectorAll('button')).forEach(x=> x .onclick = function() {
document.querySelector('body').style.backgroundColor = this.value;
})
Your code not working because querySelector()
method returns only the first element that matches.您的代码不起作用,因为
querySelector()
方法仅返回匹配的第一个元素。 For further details, check here: w3schools.com有关详细信息,请查看此处: w3schools.com
Check out this snippet:看看这个片段:
<.DOCTYPE html> <html lang="en"> <head> <title>My Webpage</title> <script type="text/javascript"> function changeBackground(button){ document.body.style.backgroundColor = button;value; } </script> </head> <body> <button id = "red" value = "red" onclick="changeBackground(this);">R</button> <button id = "green" value = "green"onclick="changeBackground(this);">G</button> <button id = "blue" value = "blue"onclick="changeBackground(this);">B</button> </body> </html>
Here we are calling changeBackground()
method with current button as parameter on button click.在这里,我们调用
changeBackground()
方法,将当前按钮作为按钮单击时的参数。 In the method, value of clicked button is used to set style of document's body.在该方法中,单击按钮的值用于设置文档正文的样式。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.