不幸的是，我无法得到棋子的图像来填满我做的棋盘。棋盘看起来不错，但我已经创建了代码，我已经插入创建主教。我试着把广场上的主教一个一个地加在第二栏上。不幸的是，每块瓷砖中间都有一个很小的主教！这是我的风格，.td1=白色方块，.td2=黑色方块在普通棋盘上。
image
{
position : relative;
max-width : 100%;
max-height : 100%;
height : 100%;
}
table
{
border-collapse : collapse;
}
.td1 {
padding: 10px;
margin : 0px;
background-color : gray;
border-style: solid;
border-width: 1px;
border-color : black;
position : relative;
width : 12px;
height : 12px;
}
.td2
{
padding: 10px;
margin : 0px;
background-color : yellow;
border-style: solid;
border-width: 1px;
border-color : black;
position : relative;
width : 12px;
height : 12px;
}
这是javascript代码，我添加了一个额外的if语句，稍后将对其进行更改，以便在第2列中每隔一个插入bishop图像。
for (x=0; x<rows; x++)
{
board +="<tr>";
for (y=0; y<cols;y++)
{
switch1 = x%2;
if (y==1 && y%2 == switch1) //just for test purposes
board +="<td class=\"" + "td1\">" + "<img src=\"white bishop.png\" width=12px height=12px>" /<---add image here.
else if (y%2 == switch1)
board +="<td class=\"" + "td1\">" ;
else
board +="<td class=\"" + "td2\">";
}
board +="</tr>";
}
<link rel="stylesheet" href="styles.css">
<script src="sample.js" src="model.js"></script>
<script src="model.js"></script>
</head>
<body onload ="start()">
<table>
<div id ="gridDiv"> </div>
</table>
</body>
最佳答案
width元素的HTML属性height或<img>采用像素值，例如width=100。没有其他允许的值，如%或em，因此您不需要也实际上不能将px添加到您的值中。
将board +="<td class=\"" + "td1\">" + "<img src=\"white bishop.png\" width=12px height=12px>"改为board +="<td class=\"" + "td1\">" + "<img src=\"white bishop.png\" width=12 height=12>"并尝试一下。
关于javascript - 简单的国际象棋棋盘与Javascript，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26224349/