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.