Question

我尝试使用document.getElementByClassId().style.color更改HTML文档中元素的颜色。我可以看到它确实为元素添加了内联样式标记，但它们似乎被浏览器忽略了。

我尝试使用!important标记，但没有改变。这是我的HTML文档。我将我想要修改的元素的CSS更改为内联标记，但它们也被忽略了。到目前为止，其他一切都有效。

这是我的代码（我是初学者，请放轻松对我：/）。

＆＃13;

//Only gets used to make the rows array.
var cells = [];

//Array that contains the entirety of the table element.
var rows = [];

//Random number to be used to color a random cell.
var rand = 0;


//Unique ID number that gets applied to each cell on the gameboard.
var id = 0;

//Calls cellMake.
var makeBoard = function(size) {
    cellMake(size);
}

//Adds opening and closing tags at the beginning and end of each string then writes them to the rows array.
var rowMake = function(num) {
    for(c = 0; num > c; c++) {
        rows[c] = '<tr>' + cells[c] + '</tr>';
    }
    writeBoard();
}

//Writes cell elements to the cells array based on how many columns the makeBoard function was called for.
var cellMake = function(num) {
    for(a = 0; num > a; a++) {
        cells[a] = '';
        for(b = 0; num > b; b++) {
            cells[a] += '<td id="' + id + '" class="pixel">';
            id++;
        }
    }
    rowMake(num);
}

//Chooses random pixel from the board and sets its color.
var choosePixel = function() {
    rand = Math.round(Math.random() * rows.length * rows.length);
    console.log(rand);
    document.getElementById(rand).style.color = 'red';
}

//Writes each element of the rows array onto the HTML document.
var writeBoard = function() {
    for(d = 0; rows.length > d; d++) {
        document.getElementById('gameboard').innerHTML += rows[d];
    }
    choosePixel();
}

window.onload = function() {
    makeBoard(50);
}

＆＃13;

<!DOCTYPE html>
<html>
    <head>
        <title>Can I write JS?</title>
        <script src="script.js"></script>
        <style>
            body {
                text-align: center;
                background-color: black;
            }
            #gameboard {
                display: inline-block;
                margin: 0 auto;
                padding-top: 5%;
            }
            .pixel {
                height: 5px;
                width: 5px;
            }
        </style>
    </head>
    <body>
        <table id="gameboard"></table>
    </body>
</html>

＆＃13;

Answer 1

您必须设置backgroundColor而非color的样式，因为单元格不包含任何文本，颜色将应用于该文本

//Only gets used to make the rows array.
var cells = [];

//Array that contains the entirety of the table element.
var rows = [];

//Random number to be used to color a random cell.
var rand = 0;


//Unique ID number that gets applied to each cell on the gameboard.
var id = 0;

//Calls cellMake.
var makeBoard = function(size) {
    cellMake(size);
}

//Adds opening and closing tags at the beginning and end of each string then writes them to the rows array.
var rowMake = function(num) {
    for(c = 0; num > c; c++) {
        rows[c] = '<tr>' + cells[c] + '</tr>';
    }
    writeBoard();
}

//Writes cell elements to the cells array based on how many columns the makeBoard function was called for.
var cellMake = function(num) {
    for(a = 0; num > a; a++) {
        cells[a] = '';
        for(b = 0; num > b; b++) {
            cells[a] += '<td id="' + id + '" class="pixel"></td>';
            id++;
        }
    }
    rowMake(num);
}

//Chooses random pixel from the board and sets its color.
var choosePixel = function() {
    rand = Math.round(Math.random() * rows.length * rows.length);
    console.log(rand);
    document.getElementById(rand).style.backgroundColor = 'red';
}

//Writes each element of the rows array onto the HTML document.
var writeBoard = function() {
    for(d = 0; rows.length > d; d++) {
        document.getElementById('gameboard').innerHTML += rows[d];
    }
    choosePixel();
}

window.onload = function() {
    makeBoard(50);
}

<!DOCTYPE html>
<html>
    <head>
        <title>Can I write JS?</title>
        <script src="script.js"></script>
        <style>
            body {
                text-align: center;
                background-color: black;
            }
            #gameboard {
                display: inline-block;
                margin: 0 auto;
                padding-top: 5%;
            }
            .pixel {
                height: 5px;
                width: 5px;
            }
        </style>
    </head>
    <body>
        <table id="gameboard"></table>
    </body>
</html>

使用JavaScript编辑的内联样式将被忽略

1 个答案: