如何在JavaScript中为getCurrentPlayerName()返回的玩家名设置样式？

要实现仅高亮玩家名称，核心是放弃使用textContent（只能设置纯文本），改用innerHTML插入带样式的HTML标签，把玩家名称包裹在自定义样式的<span>中。下面提供两种可行方式：

方式1：内联样式（快速直接） #

直接在生成的HTML中给玩家名称的<span>添加内联样式，修改你的makeMove函数中对应代码块：

function makeMove(row, col) {
    if (!isGameStarted) return;

    const cell = document.querySelector(`.row:nth-child(${row + 1}) .cell:nth-child(${col + 1})`);
    if (cell.textContent !== "") return;

    if (currentPlayer === 1) {
        cell.textContent = "X";
        gameBoard[row][col] = "X";
    } else if (currentPlayer === 2) {
        cell.textContent = "O";
        gameBoard[row][col] = "O";
    }

    if (checkWin()) {
        const resultDiv = document.getElementById("message");
        // 替换为innerHTML，用span包裹玩家名并加样式
        resultDiv.innerHTML = `You won, <span style="color: #2ecc71; font-size: 1.2em; font-weight: bold;">${getCurrentPlayerName()}</span>!`;
        isGameStarted = false;
    } else if (checkDraw()) {
        const resultDiv = document.getElementById("message");
        resultDiv.textContent = "It's a draw!";
        isGameStarted = false;
    } else {
        currentPlayer = currentPlayer === 1 ? 2 : 1;
        const resultDiv = document.getElementById("current-player");
        // 同样用innerHTML处理玩家名高亮
        resultDiv.innerHTML = `It's your turn <span style="color: #ff4500; font-size: 1.2em; font-weight: bold;">${getCurrentPlayerName()}</span>`;
    }
}

方式2：动态添加CSS类（更易维护） #

如果需要统一调整样式，可通过JS动态创建CSS类，再用类名包裹玩家名称：

第一步：在代码初始化时添加全局样式 #

// 在游戏初始化逻辑中添加这段代码，动态注入CSS
const styleSheet = document.createElement('style');
styleSheet.textContent = `
  .player-name-highlight {
    color: #ff4500; /* 自定义颜色 */
    font-size: 1.2em; /* 自定义字号 */
    font-weight: bold; /* 可选：加粗 */
  }
`;
document.head.appendChild(styleSheet);

第二步：修改makeMove函数中的文本赋值逻辑 #

function makeMove(row, col) {
    // ... 原有代码不变 ...

    if (checkWin()) {
        const resultDiv = document.getElementById("message");
        resultDiv.innerHTML = `You won, <span class="player-name-highlight">${getCurrentPlayerName()}</span>!`;
        isGameStarted = false;
    } else if (checkDraw()) {
        const resultDiv = document.getElementById("message");
        resultDiv.textContent = "It's a draw!";
        isGameStarted = false;
    } else {
        currentPlayer = currentPlayer === 1 ? 2 : 1;
        const resultDiv = document.getElementById("current-player");
        resultDiv.innerHTML = `It's your turn <span class="player-name-highlight">${getCurrentPlayerName()}</span>`;
    }
}

关键说明 #

• textContent会将所有内容当作纯文本解析，无法识别HTML标签；innerHTML则能正确解析HTML，因此可以通过<span>给特定文本片段单独设置样式。
• 两种方式都不需要修改现有HTML结构，完全通过JavaScript实现样式控制，符合你的需求。

内容的提问来源于stack exchange，提问作者anonimous23