如何在点击时更改div元素的颜色？

我有这个HTML页面，如果点击与类名FreeSeat元素我想改变的是颜色的div element.Below是我的html页面如何在点击时更改div元素的颜色？

<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>

这将是非常有益的，如果有人能帮助我拿出这个。

来源

2015-10-16 Abdul Tayyeb

[点击更改CSS属性]（http://stackoverflow.com/questions/14319274/change-css-properties-on-click）和其他人通过搜索发现。 – Rob

JQuery对于这些事情来说是惊人的。

说你有ID为 'BOX1'

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

与CSS

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

使用jQuery风格是一个div，你可以做这样的判断：

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

现在只要点击你的div，颜色就会变色ge，你可以自定义这个你喜欢的东西。

Here是一个JSFiddle演示。

此外，因为你没有指定要改变颜色的，在我的例子jQuery的到底是什么，它是告诉浏览器与box1 ID的div被点击时，改变的background-colordiv的ID为box1，你可以改变任何东西。

如果你有一个<p>标签，你也可以在点击div时改变它，希望这有助于你！

来源

2015-10-16 02:59:19

你不需要jQuery来做到这一点，它在简单的JavaScript一样简单。 – Rob

它可能很好，但这只是一个使用jQuery的例子，但我更喜欢它比JS。你能给我看一个使用普通JS的例子吗？ @Rob –

如果你想这样做，你必须开始自己的问题。另外，jQuery是JavaScript。更好的是，只需搜索SO或Google即可。 – Rob

考虑到您要使用纯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

来源

2015-10-16 03:06:44 User528491

最少的答案：

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

你可以通过它的索引引用的元素：

FreeSeat[0]是第一个div， FreeSeat[1]是第二个div等...

来源

2015-10-16 03:13:42

如何在点击时更改div元素的颜色？

回答

相关问题