Question

我正在为我的HTML类工作，并且无法弄清楚如何在onmouseover事件期间将替换图像的文本的第一个字母大写，而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;
}

大写innerHTML文本的问题

2 个答案: