为什么在 javascript 中设置 ImageButton 的 ImageUrl 不起作用？

Question

我是 asp.net 的新手。我尝试使用以下代码更改 asp.net imageButton 的图像：

<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="/Images/blueButton.png" Width="137px" Height="34px" onmouseover="this.ImageUrl='/Images/greenButton.png'" onmouseout="this.ImageUrl='/Images/blueButton.png"/>

没有用。 但是，以下代码确实有效：

<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="/Images/blueButton.png" Width="137px" Height="34px" 
    onmouseover="this.src='/Images/greenButton.png'" onmouseout="this.src='/Images/blueButton.png"/>

如您所见，我使用的是 src 而不是 ImageUrl。

为什么第一个不起作用？

Answer 1

您正在混合服务器和客户端代码。 JavaScript 在客户端运行，而您的 <asp:ImageButton> 在服务器上运行。这是两个独立的域。

ASP.NET 在服务器上将<asp:ImageButton> 呈现为HTML <img src="/Images/blueButton.png"> 并将其发送到客户端，然后鼠标事件可以在客户端访问其名为src 的DOM 属性。

查看浏览器中的 HTML 源代码，了解您在 ASPX 文件中编写的内容与浏览器接收到的 HTML 之间的区别。