单击时如何更改div元素的颜色？
[英]How to change the colour of a div element when clicked?
问题描述
I have a this html page, Whenever the element with class name FreeSeat is clicked I want to change the colour of that div element.Below is my html page 
我有一个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>
It will be very helpful if anyone can help me out with this . 如果有人可以帮助我，这将非常有帮助。
4 个解决方案
解决方案1
2 2015-10-16 03:06:44
Considering that you want to use pure JS and not any library, you'd have to manually add event listeners to your classes. 考虑到您要使用纯JS而不是任何库，因此必须手动将事件侦听器添加到类中。 And it has been solved for a 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);
}
But for your case, here's a working fiddle 但是对于您而言，这是一个有效的小提琴
解决方案2
2 2015-10-16 03:13:42
You can use the following method to change the background color of an element by class: 您可以使用以下方法按类更改元素的背景色：
const free_seat = document.getElementsByClassName('FreeSeat');
free_seat[0].style.backgroundColor = '#ff0';
Each element can be referenced by its index: 每个元素都可以通过其索引来引用：
free_seat[0] // first div
free_seat[1] // second div
Therefore, we can create a function that will be called whenever the click event is delivered to the target: 因此，我们可以创建一个将click事件传递到目标时将调用的函数：
const change_color = () => {
this.style.backgroundColor = '#ff0';
};
for (let i = 0; i < free_seat.length; i++) {
free_seat[i].addEventListener('click', change_color);
}
Note: You can also use
document.querySelectorAll('.FreeSeat')to obtain aNodeListof elements of a certain class.document.querySelectorAll('.FreeSeat')获得某个类的元素的NodeList。
解决方案3
1 2015-10-16 02:59:19
JQuery is amazing for these sorts of things. jQuery对于这些事情来说是惊人的。
Say you have a div with id 'box1' 假设您有一个ID为“ box1”的div
<div id='box1'></div>
Style it with css 用CSS设置样式
#box1 {
width:100px;
height:100px;
background-color:white;
border:1px solid black;
}
Using JQuery, you can make this call: 使用JQuery，可以进行以下调用：
$( "#box1" ).click(function() {
$('#box1').css('background-color', 'red');
});
And now whenever your div is clicked, the colour will change, you can customise this however much you like. 现在，每当单击div ，颜色都会改变，您可以根据自己的喜好自定义此颜色。
Here is a JSFiddle demo. 这是一个JSFiddle演示。
Also, since you didn't specify exactly what you want to change the colour of , in my example jquery, it is telling the browser that when a div with an id of box1 is clicked, change the background-color of the div with an id of box1 , you can change anything though. 此外，因为你没有明确指定要更改的颜色，在我的例子jQuery的是什么，它是告诉浏览器时，一个div用一个id box1被点击，改变background-color的的div与box1 ID，但是您可以更改任何内容。
If you have a <p> tag you can change that too when the div is clicked, hope this helped! 如果您有一个<p>标记，则在单击div时也可以更改它，希望<p>您有所帮助！
解决方案4
1 2018-06-27 13:44:32
You can use simply the css focus pseudo-class for this: 您可以为此简单地使用css focus伪类：
#foo:focus {
background-color:red;
}
<div id="foo" tabindex="1">hello world!</div>
Dont forget to set the tabindex. 不要忘记设置tabindex。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.