JavaScript和在特定(行、列)位置向网格添加div的问题

Question

我想使用外部JavaScript文件向html代码添加一个新的网格成员，但它不起作用，我不知道为什么。

我想做一个大的grid，就像一个超大的棋盘，在那里我可以在任何行或列放置div。

function Tile(tilex, tiley) {
this.tilex = tilex;
this.tiley = tiley;
this.initTile = function initTile() {
var div = document.createElement('div');
div.id = ("tile" + tilex + "_" + tiley);
div.className = "tile";
div.innerHTML = "X";
div.style.gridColumnStart(tilex);
div.style.gridColumnEnd(tilex + 1);
div.style.gridRow(tiley);
div.style.gridRowEnd(tiley + 1);
getElementById("tileGrid").appendChild(div);
}
}
tile7_1 = new Tile(7, 1);
tile7_1.initTile();

body {
background-color: rgba(236, 150, 119, 0.726);
}

/*15 25*/
.grid {
display: grid;
}
#tileGrid {
background-color: rgb(20, 20, 20);
padding: 2px;
grid-template-columns: repeat(15, 20px);
grid-template-rows: repeat(25, 20px);
grid-auto-columns: 20px;
}
.tile {
background-color: rgba(100, 200, 100, 0.8);
border: 1px solid rgb(20, 20, 20);
font-size: 10px;
}

<div class="grid" id="tileGrid">
<div class="tile" id="tile1">1</div>
<div class="tile" id="tile2">2</div>
<div class="tile" id="tile3">3</div>
<div class="tile" id="tile4">4</div>
</div>

Answer 1

这是一个非常有趣的问题。

正如您正确指出的那样，问题出在JavaScript文件中。

我看到的第一个问题是在initTile函数(也称为方法(中设置div.style.gridColumnStart的方式。grid.style.gridColumnStart不是一个函数，而是一个设置(也称为属性(，因此您应该使用=为其赋值。这与您尝试进行的其他三个函数调用相同：div.style.gridColumnEnd、div.style.gridRow和div.style.gridRowEnd。

我看到的第二个问题是如何使用内部函数tilex和tiley中的变量。由于变量的全局、局部、函数和块作用域，这些变量此时不可见。因此，您应该将它们称为this.tilex和this.tiley。

因此，您尝试进行的四个函数调用应该是：

div.style.gridColumnStart = this.tilex;
div.style.gridColumnEnd = this.tilex + 1;
div.style.gridRow = this.tiley;
div.style.gridRowEnd = this.tiley + 1;

此外，您应该在document对象上调用getElementById()。

function Tile(tilex, tiley) {
this.tilex = tilex;
this.tiley = tiley;
this.initTile = function initTile() {
var div = document.createElement('div');
div.id = ("tile" + this.tilex + "_" + this.tiley);
div.className = "tile";
div.innerHTML = this.tilex + "_" + this.tiley;
div.style.gridColumnStart = this.tilex;
div.style.gridColumnEnd = this.tilex + 1;
div.style.gridRow = this.tiley;
div.style.gridRowEnd = this.tiley + 1;
document.getElementById("tileGrid").appendChild(div);
}
}
let tile7_1 = new Tile(7, 1);
tile7_1.initTile();
let tile2_6 = new Tile(2, 6);
tile2_6.initTile();
let tile4_3 = new Tile(4, 3);
tile4_3.initTile();
let tile7_7 = new Tile(7, 7);
tile7_7.initTile();

body {
background-color: rgba(236, 150, 119, 0.726);
}

/*15 25*/
.grid {
display: grid;
}
#tileGrid {
background-color: rgb(20, 20, 20);
padding: 2px;
grid-template-columns: repeat(15, 20px);
grid-template-rows: repeat(25, 20px);
grid-auto-columns: 20px;
}
.tile {
background-color: rgba(100, 200, 100, 0.8);
border: 1px solid rgb(20, 20, 20);
font-size: 10px;
}

<div class="grid" id="tileGrid">
<div class="tile" id="tile1">1</div>
<div class="tile" id="tile2">2</div>
<div class="tile" id="tile3">3</div>
<div class="tile" id="tile4">4</div>
</div>