如果不使用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>
答案 0 :(得分：3)
您可以设置元素的className属性：
document.getElementById('idOfTheDiv').className = "desiredClassName";
或者您可以使用元素classList添加或删除类：
document.getElementById('idOfTheDiv').classList.remove('doNotWantThisClass');
document.getElementById('idOfTheDiv').classList.add('desiredClassName');
答案 1 :(得分：1)
我会使用replace()和事件委托。这是一个起点：
var board = document.getElementById('board');
board.addEventListener('click', function (ev) {
if (ev.target.parentNode.id == 'board') {
var cls = ev.target.getAttribute('class');
ev.target.setAttribute('class', swap(cls));
}
});
function swap (cls) {
return cls.replace(/\b(white|black)\b/, function ($0, $1) {
return $1 == 'white' ? 'black' : 'white';
});
}#board { width: 150px; }
.white { background: white; }
.black { background: black; }
.piece {
float: left;
width: 43px;
height: 43px;
border: 1px solid black;
margin: 0 5px 5px 0;
border-radius: 50%;
}<div id="board">
<div class="piece white"></div
><div class="piece white"></div
><div class="piece white"></div
><div class="piece white"></div
><div class="piece black"></div
><div class="piece black"></div
><div class="piece black"></div
><div class="piece white"></div
><div class="piece white"></div>
</div>
答案 2 :(得分：0)
这里有一些让你入门的东西，将其与 Pabs123 的答案相结合，你应该能够弄明白。使用querySelectorAll()方法和addEventListener()，您可以向div元素添加点击事件，从而允许少量代码处理所有内容。
window.onload = function() {
var divs = document.querySelectorAll('.othello-piece');
for(var i = 0, len = divs.length; i < len; i++) {
var div = divs[i];
div.addEventListener('click', function(e){
e = e || event;
var elem = e.target;
var id = elem.id;
var classes = elem.classList;
console.log(classes);
}, false);
}
};
当然，你可能想在那里放一些支票（比如divs变量有length等），你可以删除日志，它只是向你展示它作品。此外，here's a fiddle正在行动中。