大寫innerHTML文本的問題

Question

我正在為我的HTML類開發一個項目，但無法弄清楚如何在onmouseover事件期間大寫替換圖像的第一個字母，然后在onmouseout事件期間返回到其初始圖片狀態。 我能夠成功顯示文本，但無法獲得首字母大寫。 文本應該是鏈接（href，而不是href，如果單擊時彈出的確認框上單擊“取消”，則可以防止頁面轉到鏈接）。 彈出確認對話框，詢問他們是否要轉到鏈接，如果不想，則單擊“取消”時，頁面停留。

這是我的功能：

function planetname(x,y,z){
  document.getElementById(x).innerHTML=y;
  document.getElementById(x).style.backgroundColor="clear";
  document.getElementById(x).style.color="White";
  document.getElementById(z).style.height="172px";
}

在這種情況下，x是href鏈接，y是行星名稱，z是它所在的表行。這是我的html的一部分：

<h3>Click on one of the images below to learn more about that planet.</h3>
    <table height="150px" id="tabl">
        <tr id="tr1">
            <td onmouseover=planetname("mercurylink","mercury","tr1") onmouseout=planetpic("Mercury","mercurylink","tr1")><href="mercury.htm" onclick=page("Mercury") id="mercurylink"><img src="images/mercury.png" height="150px" id="mercurypic"></td>
            <td hidden id="Mercury">Mercury</td>
        </tr>

onmouseout或onclick沒問題，只是onmouseover給我一些問題。

非常感謝。

Answer 1

對於您的大寫問題，我建議這樣做：

document.getElementById(x).innerHTML = y.substring(0,1).toUpperCase() + y.substring(1).toLowerCase();

首先，您提取第一個字母並將其大寫，然后確保其余所有字母均為小寫。

Answer 2

您可以使用CSS將文本大寫。

#yoyr-element-id
{
text-transform: capitalize;
}