使用HTML / CSS或javascript更改按鈕單擊時div的背景顏色

Question

我有4個div，每個div都有幾個控件和一個按鈕。

如何根據div中的按鈕單擊將div的背景色更改為灰色。

Answer 1

首先需要找到所有按鈕元素。

var buttons = document.getElementsByTagName("button");

接下來，遍歷按鈕元素，並將事件偵聽器添加到每個按鈕。

單擊按鈕后，將父級的背景顏色更改為灰色。

this.parentElement.style.backgroundColor = "grey";

 var buttons = document.getElementsByTagName("button"); for(var i=0; i<buttons.length; i++) { buttons[i].addEventListener("click",function(e) { this.parentElement.style.backgroundColor = "gray"; }) } 

 hr{ margin:0px; border:none; height:1px; background-color:gray; } 

 <div> I will change color when you click the button. <button>Click Me</button> </div> <hr/> <div> I will change color too. <button>Click Me</button> </div> <hr/> <div> What about me? <button>Click Me</button> </div> 

Answer 2

好吧，這是您的問題的非引導解決方案：

您可以在此處找到一個實時示例。

HTML：

<div id="1">
<button onclick="button = 1; changecolour();">Click Me</button>
</div>
<div id="2">
<button onclick="button = 2; changecolour();">Click Me</button>
</div>
<div id="3">
<button onclick="button = 3; changecolour();">Click Me</button>
</div>

CSS（可選（（用於演示）））：

div {

  height: 150%;

  width: 30%;
  display: inline-block;
  background-color: lightgreen;
   -webkit-box-shadow: 0 3px 4px black;
   -moz-box-shadow: 0 3px 4px black;
    box-shadow: 0 3px 4px black;
  text-align: center;
 padding: 5px;

  }

Javascript：

var button = "";
function changecolour() {

console.log(button);
document.getElementById(button).style.backgroundColor = "lightgray";

 }