javascript - 为什么在 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 之间的差异。