如何在點擊時更改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元素的顏色？

回答

相關問題