在不使用 JQUERY 的情况下，我需要能够更改表中 div 上的 css 类。以下链接将向您展示表格的样子 https://jsfiddle.net/7gwktgxz/
我需要能够单击一个空格，它会删除该类的最后一个元素，并添加一个新元素。我需要能够获取 div 的 id 并更改该 div 的类(或类似的东西)
这是 HTML
<table class="othello-board" cellspacing="0">
<tr class="base white">
<th colspan="8">
<div class="base-pieces-wrapper">
<div class="base-piece white"> </div>
<div class="base-piece white"> </div>
<div class="base-piece white"> </div>
<div class="base-piece white"> </div>
<div class="base-piece white"> </div>
<div class="base-piece white"> </div>
<div class="base-piece white"> </div>
<div class="base-piece white"> </div>
<div class="base-piece white"> </div>
<div class="base-piece white"> </div>
<div class="base-piece white"> </div>
<div class="base-piece white"> </div>
<div class="base-piece white"> </div>
<div class="base-piece white"> </div>
<div class="base-piece white"> </div>
<div class="base-piece white"> </div>
<div class="base-piece white"> </div>
<div class="base-piece white"> </div>
<div class="base-piece white"> </div>
<div class="base-piece white"> </div>
<div class="base-piece white"> </div>
<div class="base-piece white"> </div>
<div class="base-piece white"> </div>
<div class="base-piece white"> </div>
<div class="base-piece white"> </div>
<div class="base-piece white"> </div>
<div class="base-piece white"> </div>
<div class="base-piece white"> </div>
<div class="base-piece white"> </div>
<div class="base-piece white"> </div>
<div class="base-piece white"> </div>
<div class="base-piece white"> </div>
</div>
</th>
</tr>
<tr class="game-row">
<td> <div class="othello-piece none" id="tile-1-1"> </div> </td>
<td> <div class="othello-piece none" id="tile-1-2"> </div> </td>
<td> <div class="othello-piece none" id="tile-1-3"> </div> </td>
<td> <div class="othello-piece none" id="tile-1-4"> </div> </td>
<td> <div class="othello-piece none" id="tile-1-5"> </div> </td>
<td> <div class="othello-piece white" id="tile-1-6"> </div> </td>
<td> <div class="othello-piece none" id="tile-1-7"> </div> </td>
<td> <div class="othello-piece none" id="tile-1-8"> </div> </td>
</tr>
<tr class="game-row">
<td> <div class="othello-piece none" id="tile-2-1"> </div> </td>
<td> <div class="othello-piece none" id="tile-2-2"> </div> </td>
<td> <div class="othello-piece none" id="tile-2-3"> </div> </td>
<td> <div class="othello-piece none" id="tile-2-4"> </div> </td>
<td> <div class="othello-piece white" id="tile-2-5"> </div> </td>
<td> <div class="othello-piece none" id="tile-2-6"> </div> </td>
<td> <div class="othello-piece none" id="tile-2-7"> </div> </td>
<td> <div class="othello-piece none" id="tile-2-8"> </div> </td>
</tr>
<tr class="game-row">
<td> <div class="othello-piece none" id="tile-3-1"> </div> </td>
<td> <div class="othello-piece none" id="tile-3-2"> </div> </td>
<td> <div class="othello-piece none" id="tile-3-3"> </div> </td>
<td> <div class="othello-piece white" id="tile-3-4"> </div> </td>
<td> <div class="othello-piece black" id="tile-3-5"> </div> </td>
<td> <div class="othello-piece none" id="tile-3-6"> </div> </td>
<td> <div class="othello-piece none" id="tile-3-7"> </div> </td>
<td> <div class="othello-piece none" id="tile-3-8"> </div> </td>
</tr>
<tr class="game-row">
<td> <div class="othello-piece none" id="tile-4-1"> </div> </td>
<td> <div class="othello-piece none" id="tile-4-2"> </div> </td>
<td> <div class="othello-piece white" id="tile-4-3"> </div> </td>
<td> <div class="othello-piece white" id="tile-4-4"> </div> </td>
<td> <div class="othello-piece black" id="tile-4-5"> </div> </td>
<td> <div class="othello-piece black" id="tile-4-6"> </div> </td>
<td> <div class="othello-piece none" id="tile-4-7"> </div> </td>
<td> <div class="othello-piece none" id="tile-4-8"> </div> </td>
</tr>
<tr class="game-row">
<td> <div class="othello-piece none" id="tile-5-1"> </div> </td>
<td> <div class="othello-piece none" id="tile-5-2"> </div> </td>
<td> <div class="othello-piece none" id="tile-5-3"> </div> </td>
<td> <div class="othello-piece black" id="tile-5-4"> </div> </td>
<td> <div class="othello-piece white" id="tile-5-5"> </div> </td>
<td> <div class="othello-piece black" id="tile-5-6"> </div> </td>
<td> <div class="othello-piece black" id="tile-5-7"> </div> </td>
<td> <div class="othello-piece none" id="tile-5-8"> </div> </td>
</tr>
<tr class="game-row">
<td> <div class="othello-piece none" id="tile-6-1"> </div> </td>
<td> <div class="othello-piece none" id="tile-6-2"> </div> </td>
<td> <div class="othello-piece none" id="tile-6-3"> </div> </td>
<td> <div class="othello-piece none" id="tile-6-4"> </div> </td>
<td> <div class="othello-piece none" id="tile-6-5"> </div> </td>
<td> <div class="othello-piece black" id="tile-6-6"> </div> </td>
<td> <div class="othello-piece black" id="tile-6-7"> </div> </td>
<td> <div class="othello-piece none" id="tile-6-8"> </div> </td>
</tr>
<tr class="game-row">
<td> <div class="othello-piece none" id="tile-7-1"> </div> </td>
<td> <div class="othello-piece none" id="tile-7-2"> </div> </td>
<td> <div class="othello-piece none" id="tile-7-3"> </div> </td>
<td> <div class="othello-piece none" id="tile-7-4"> </div> </td>
<td> <div class="othello-piece none" id="tile-7-5"> </div> </td>
<td> <div class="othello-piece none" id="tile-7-6"> </div> </td>
<td> <div class="othello-piece none" id="tile-7-7"> </div> </td>
<td> <div class="othello-piece none" id="tile-7-8"> </div> </td>
</tr>
<tr class="game-row">
<td> <div class="othello-piece none" id="tile-8-1"> </div> </td>
<td> <div class="othello-piece none" id="tile-8-2"> </div> </td>
<td> <div class="othello-piece none" id="tile-8-3"> </div> </td>
<td> <div class="othello-piece none" id="tile-8-4"> </div> </td>
<td> <div class="othello-piece none" id="tile-8-5"> </div> </td>
<td> <div class="othello-piece none" id="tile-8-6"> </div> </td>
<td> <div class="othello-piece none" id="tile-8-7"> </div> </td>
<td> <div class="othello-piece none" id="tile-8-8"> </div> </td>
</tr>
<tr class="base black">
<th colspan="8">
<div class="base-pieces-wrapper">
<div class="base-piece black"> </div>
<div class="base-piece black"> </div>
<div class="base-piece black"> </div>
<div class="base-piece black"> </div>
<div class="base-piece black"> </div>
<div class="base-piece black"> </div>
<div class="base-piece black"> </div>
<div class="base-piece black"> </div>
<div class="base-piece black"> </div>
<div class="base-piece black"> </div>
<div class="base-piece black"> </div>
<div class="base-piece black"> </div>
<div class="base-piece black"> </div>
<div class="base-piece black"> </div>
<div class="base-piece black"> </div>
<div class="base-piece black"> </div>
<div class="base-piece black"> </div>
<div class="base-piece black"> </div>
<div class="base-piece black"> </div>
<div class="base-piece black"> </div>
<div class="base-piece black"> </div>
<div class="base-piece black"> </div>
<div class="base-piece black"> </div>
<div class="base-piece black"> </div>
<div class="base-piece black"> </div>
<div class="base-piece black"> </div>
<div class="base-piece black"> </div>
<div class="base-piece black"> </div>
<div class="base-piece black"> </div>
<div class="base-piece black"> </div>
<div class="base-piece black"> </div>
<div class="base-piece black"> </div>
</div>
</th>
</tr>
</table>
最佳答案
你可以设置元素的className属性:
document.getElementById('idOfTheDiv').className = "desiredClassName";
或者，您可以使用元素的 classList添加或删除类:
document.getElementById('idOfTheDiv').classList.remove('doNotWantThisClass');
document.getElementById('idOfTheDiv').classList.add('desiredClassName');
关于javascript - 单击元素时如何添加和删除类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34755223/