<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 4 年前。
标签 javascript css
<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 4 年前。
我试图在页面加载后将背景颜色更改为多个表格单元格，具体取决于单元格上的内容。
如果我在我的代码中包含一个警报，那么当我单击“确定”时，页面上会出现颜色。如果我没有它，那么表格单元格不会改变颜色。我假设这是因为警报导致部分页面刷新？还有另一种方法可以做到这一点并强制显示颜色吗？
var cells = document.getElementById("example").getElementsByTagName("td");
//alert("test - colours appear if I leave this line in");
for (var i = 0; i < cells.length; i++) {
if (cells[i].innerHTML == "G") {
cells[i].style.backgroundColor = "#CCE697";
}
else if (cells[i].innerHTML == "A") {
cells[i].style.backgroundColor = "#FEECA1";
}
else if (cells[i].innerHTML == "R") {
cells[i].style.backgroundColor = "#E32E30";
}
}
现已修复!
我更改了我的代码以确保在页面加载完成后发生这种情况:
function func1() {
var cells = document.getElementById("example").getElementsByTagName("td");
//console.log("hello");
for (var i = 0; i < cells.length; i++) {
if (cells[i].innerHTML == "G") {
cells[i].style.backgroundColor = "#CCE697";
}
else if (cells[i].innerHTML == "A") {
cells[i].style.backgroundColor = "#FEECA1";
}
else if (cells[i].innerHTML == "R") {
cells[i].style.backgroundColor = "#E32E30";
}
}
}
window.onload = func1;
最佳答案
您可能没有在页面完全加载之后执行代码。通过显示警报，脚本的执行被暂停，但加载和呈现页面继续。当您通过按 OK 释放警报对话框并且脚本继续运行时，它已具备所需的所有元素。确保您等待执行直到页面加载完毕。
在这里查看执行此操作的各种方法:What is the non-jQuery equivalent of '$(document).ready()'?
关于javascript - JS改变背景颜色需要刷新页面？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54021141/