HTML如何修改页面背景颜色？
[英]How do I change the background colour of a page in HTML?
问题描述
我对 HTML/CSS/JavaScript 很陌生，我想知道如何结合 JavaScript 更改背景颜色？ 我有 3 个按钮（红色、绿色和蓝色），只要用户按下三个按钮之一，背景就会相应改变。
目前，只有“红色”按钮有效。 蓝色和绿色按钮的背景不会改变。
提前致谢！
<.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>
3 个解决方案
解决方案1
1 2020-08-21 11:27:17
使用： 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>
小提示：使用document.body ( docs ) 而不是document.querySelector('body')来加快速度；）
解决方案2
0 2020-08-21 11:22:53
那是因为
document.querySelector('button').onclick
仅将事件添加到第一个按钮，在本例中为红色
有几种方法可以为所有人做到这一点，一种方法是
Array.from(document.querySelectorAll('button')).forEach(x=> x .onclick = function() {
document.querySelector('body').style.backgroundColor = this.value;
})
解决方案3
0 2020-08-21 11:26:15
您的代码不起作用，因为querySelector()方法仅返回匹配的第一个元素。 有关详细信息，请查看此处： w3schools.com
看看这个片段：
<.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>
在这里，我们调用changeBackground()方法，将当前按钮作为按钮单击时的参数。 在该方法中，单击按钮的值用于设置文档正文的样式。
如何以编程方式更改单元格的背景颜色？ （不改变，不依赖于价值，不依赖于创造）
[英]How do I change the background colour of a cell programically? (not onchange, not depending on value, not on creation)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.