[英]How to change background colour of cell
基本上,我正在創建一個4x4的燈板,我希望按順序點亮某些單元格,我希望首先更改背景色的單元格的ID是yellow1,是否像這樣,因為它不會更改atm的顏色
注意:頁面加載時為灰色( #404040
)
抱歉,這么早的短代碼讓我在移動中思考。 這是我帶有表的完整.html文件。 基本上我希望黃色1變黃,然后當那是黃色時我希望blue2變藍並且黃色變回灰色,然后我希望green3變綠色,而藍色變回灰色,依此類推直到orange5然后我想變回yellow1並使其無限循環直到文檔關閉。 這是我的全部代碼,我仍然無法獲得任何要更改顏色的單元格。 我還希望它在顏色變化之間等待1.5秒,因為您可以看到ive進入了setInterval函數,但仍然沒有運氣。
<head>
<title>Light Board</title>
</head>
<body>
<style type="text/css">
.tg {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
</style>
<table id="lightboard" class="tg" style=undefined;table-layout: fixed; width: 526px">
<colgroup>
<col style="width: 124px">
<col style="width: 129px">
<col style="width: 133px">
<col style="width: 140px">
</colgroup>
<tr>
<th class="tg-3as3" style="background-color:#404040";></th>
<th class="tg-3as3" style="background-color:#404040";></th>
<th class="tg-3as3" style="background-color:#404040";></th>
<th id="white4" class="tg-3as3" style="background-color:#404040";></th>
</tr>
<tr>
<td class="tg-3as3" style="background-color:#404040";></td>
<td id="yellow1" class="tg-3as3" style="background-color:#404040";></td>
<td class="tg-3as3" style="background-color:#404040";></td>
<td class="tg-3as3" style="background-color:#404040";></td>
</tr>
<tr>
<td id="blue3" class="tg-3as3" style="background-color:#404040";></td>
<td class="tg-3as3" style="background-color:#404040";></td>
<td id="green2"class="tg-3as3" style="background-color:#404040";></td>
<td class="tg-3as3" style="background-color:#404040";></td>
</tr>
<tr>
<td class="tg-3as3" style="background-color:#404040";></td>
<td id="orange5" class="tg-3as3" style="background-color:#404040";></td>
<td class="tg-3as3" style="background-color:#404040";></td>
<td class="tg-3as3" style="background-color:#404040";></td>
</tr>
</table>
</body>
<script>
var yellow1 = document.getElementById("yellow1");
var green2 = document.getElementById("green2");
var blue3 = document.getElementById("blue3");
var white4 = document.getElementById("white4");
var orange5 = document.getElementById("orange5");
window.addEventListener("load", function() {
yellow1.style.backgroundColor = "#404040";
})
tInterval()
function tInterval() {
tInterval = setInterval(doSequence, 1500)
}
function doSequence() {
if (yellow1.style.backgroundColor == "#404040")
{
yellow1.style.backgroundColor="rgb(255,255,0)";
return;
}
if(yellow1.style.backgroundColor == "rgb(255,255,0)")
{
yellow1.style.backgroundColor == "#404040";
green2.style.backgroundColor="rgb(0,255,0)";
return;
}
}
</script
還要檢查getElementById,您的ID大寫應該為“ ... Id”,
抱歉,我還不能添加評論,因為我沒有足夠的分數,所以不得不將其寫為答案
我可以看到您的getElementByID語法錯誤,應該是這樣的:
var yellow1 = document.getElementById("yellow1");
並為該元素設置顏色,例如:
yellow1.style.backgroundColor = "#FF0000";
謝謝
javascript無法訪問css的值,您應該在if語句之前使用javascript分配其顏色
var yellow1 = document.getElementById("yellow1");
window.addEventListener('load', function(){
yellow1.style.backgroundColor = "#404040";
})
if(yellow1.style.backgroundColor == "rgb(64, 64, 64)")
{ yellow1.style.backgroundColor = "#FFFF00"; }
現在可以了。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.