簡單的國際象棋棋盤與Javascript

Question

不幸的是，我無法獲得填滿棋盤的棋子圖像。 棋盤看起來不錯，但是我已經創建了要插入的代碼來創建主教。 我試圖將主教每隔一個添加到第二列的正方形上。 不幸的是，我在每個瓷磚的中心都有一個很小的主教！ 這是我的樣式， .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語句，稍后將對其進行更改，以在第二列上每隔一個插入一個主教圖像。

    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>

Answer 1

<img>元素的HTML屬性width或height采用像素值，例如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

問題描述

1 個解決方案

解決方案1
0 2014-10-06 20:32:06

簡單的國際象棋棋盤與Javascript

問題描述

1 個解決方案

解決方案1 0 2014-10-06 20:32:06

解決方案1
0 2014-10-06 20:32:06