为什么在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之间的区别。