Question

我正在尝试在页面加载后将背景色更改为多个表格单元格，具体取决于单元格上的内容。

如果我在代码中包含警报，则单击“确定”时，页面上会显示颜色。如果我没有它，那么表格单元不会改变颜色。我假设这是因为警报导致页面部分刷新？我还有另一种方法可以强迫颜色出现吗？

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;

Answer 1

页面完全加载后，您可能不执行代码。通过显示警报，脚本的执行被挂起，但是继续加载和呈现页面。在您按OK释放警报对话框时，脚本继续进行，它具有所需的所有元素。确保等待执行，直到页面加载完毕。

在这里查看执行此操作的各种方法：What is the non-jQuery equivalent of '$(document).ready()'?

Answer 2

尝试以下代码 var x = document.getElementById（“ mytable”）。getElementsByTagName（“ td”）; x [0] .style.backgroundColor =“黄色”;

JS更改背景色需要页面刷新吗？

2 个答案: