大写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;
}