单击时如何更改div元素的颜色？答案

【问题标题】：How to change the colour of a div element when clicked?单击时如何更改div元素的颜色？
【发布时间】：2016-01-14 16:04:21
【问题描述】：

我有一个这个 html 页面，每当单击类名为 FreeSeat 的元素时，我都想更改该 div 元素的颜色。下面是我的 html 页面

<html>
 <head>
  <title>
   QuickBus
  </title>
  <link type="text/css" rel="stylesheet" href="Seat.css">
 </head>
 <body>
  <div id="Bus">
   <div class="Row">
    <div class="FreeSeat"  ></div>
    <div class="FreeSeat"  ></div>
    <div class="ResSeat"  ></div>
    <div class="ResSeat"  ></div>
    <div class="ResSeat"  ></div>
   </div>
  </div>
 <body>
</html>

如果有人能帮我解决这个问题，那将非常有帮助。

【问题讨论】：

Change CSS properties on click 和通过搜索 SO 找到的许多其他人的可能重复项。

标签： javascript html

【解决方案1】：

考虑到您想使用纯 JS 而不是任何库，您必须手动将事件侦听器添加到您的类中。并且已经解决了similar problem here

var freeclass = document.getElementsByClassName("FreeSeat");
var myFunction_Free = function() {
    this.style.color = "blue";
}
for(var i=0;i<freeclass.length;i++){
    freeclass[i].addEventListener('click', myFunction_Free, false);
}

但对于你的情况，这里是working fiddle

【讨论】：

【解决方案2】：

JQuery 非常适合这类事情。

假设你有一个 id 为 'box1' 的 div

<div id='box1'></div>

用 css 设置样式

#box1 {
    width:100px;
    height:100px;
    background-color:white;
    border:1px solid black;
}

使用 JQuery，您可以进行以下调用：

$( "#box1" ).click(function() {
  $('#box1').css('background-color', 'red');
});

现在，无论何时点击您的div，颜色都会改变，您可以随意自定义。

Here 是一个 JSFiddle 演示。

另外，由于您没有明确指定要更改的颜色，在我的示例 jquery 中，它告诉浏览器当 div 的 id 为 @987654327 @被点击，将div的background-color更改为box1，您可以更改任何内容。

如果您有<p> 标签，您也可以在单击 div 时更改它，希望对您有所帮助！

【讨论】：

您不需要 jQuery 来执行此操作，而且在纯 javascript 中也很简单。
很可能是这样，但这只是一个使用 jQuery 的示例，但我更喜欢它而不是 JS。你能给我看一个使用纯JS的例子吗？ @Rob
如果你想这样，你必须开始你自己的问题。此外，jQuery 是 javascript。更好的是，只需搜索 SO 或 Google 即可。
OP 并不是专门针对纯 JavaScript 的，所以我认为这可能对他有帮助，稍后我会看看！ :)
我的意思是，没有必要仅仅为了改变元素颜色这样简单的事情而加载整个库。

【解决方案3】：

您可以使用以下方法按类更改元素的背景颜色：

const free_seat = document.getElementsByClassName('FreeSeat');
free_seat[0].style.backgroundColor = '#ff0';

每个元素都可以通过它的索引来引用：

free_seat[0] // first div
free_seat[1] // second div

因此，我们可以创建一个函数，每当click 事件被传递到目标时就会被调用：

const change_color = () => {
  this.style.backgroundColor = '#ff0';
};

for (let i = 0; i < free_seat.length; i++) {
  free_seat[i].addEventListener('click', change_color);
}

注意：您也可以使用document.querySelectorAll('.FreeSeat')获取某个类的元素的NodeList。

【讨论】：

【解决方案4】：

您可以简单地使用 css 焦点伪类：

#foo:focus {
    background-color:red;
}

<div id="foo" tabindex="1">hello world!</div>

别忘了设置tabindex。

【讨论】：