javascript - 单击按钮时更改 img

Question

我有一个带有按钮的jsp页面，当我单击按钮时，将打开一个模式，并且该模式内发生的任何事情都与js文件链接(不再是jsp)。这是我在模态(js 文件)中的表格:

html = '<table style="width:400px;height:250px;">'

    + '<tr><td title="grp"><img id="groupBtn" src="group.png"></td>'

            +'<td title="1st"><img id="1stBtn" src="1st.png""></td>'

正如你所看到的，这是js文件中的html代码，而不是jsp中的正常代码。 (我不知道确切的术语。)

因此我不能写 <style></style>在 js 文件中创建的该表的标记。

我想做的事:单击按钮时更改图像；不是鼠标输入，不是图像变化，而是a:active .

我的问题:它在 img标记而不是 a标签

所以我尝试了

+ '<tr><td title="그룹"><a id="test1><img id="groupBtn" src="group.png"></a></td>'

这个，但问题是我不知道该放在哪里

#test1:active{
    background-image : url('clicked.png');
}

在谷歌搜索时，我发现这不起作用，因为这不是更改 img 标签中 src 的方式。

html = '<table style="width:400px;height:250px;">'

    + '<tr><td title="grp"><img id="groupBtn" src="group.png"></td>'

            +'<td title="1st"><img id="1stBtn" src="1st.png""></td>'

^ 我应该如何改革这个<img id=>可以与 a:active 一起使用的东西标签？或者，我是否应该从不使用标签，而只是将整个标签更改为其他内容？另外，如果我想给通过html在js文件中创建的元素赋予样式，我应该在哪里添加样式标签？

<小时/>

为了节省您帮助我的宝贵时间，我想总结一下，我希望按钮上的图像仅在单击鼠标(更精确地按下)时更改，然后不再按下鼠标，我希望按钮图像返回到原始图像。这就是为什么我说我想要像 a:active 这样的东西标记，因为它只会在按下鼠标时更改您的 css，并在不再按下鼠标时更改回来!

Answer 1

如果您只想在点击时进行更改，您可以在脚本标记中添加 onClick 处理程序，而不是通过 css 进行更改。

<a id="test1" onclick="changeImgSrc()"><img id="groupBtn"  src="group.png"></a>

在你的js文件中的某个地方，有这个函数。

  function changeImgSrc(){
      var groupImg = document.getElementById('groupBtn');
      groupImg.src = "clicked.png";   // path of the img
      return false // required to prevent default browser behaviour.
 }