为什么在javascript中设置ImageButton的ImageUrl不起作用？(Why is setting ImageUrl of ImageButton in javascript does

为什么在javascript中设置ImageButton的ImageUrl不起作用？(Why is setting ImageUrl of ImageButton in javascript doesn't work?)

我是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 。

为什么没有第一个工作？

I'm new to asp.net. I tried to change the image of an asp.net imageButton, using this code:

<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"/>

It didn't work. However, the following code did work:

<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"/>

As you can see, I was using src instead of ImageUrl.

Why didn't the first one work?

最满意答案

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

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

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

You are mixing server and client code. JavaScript runs on the client, and your <asp:ImageButton> runs on the server. These are two separate domains.

ASP.NET renders the <asp:ImageButton> as an HTML <img src="/Images/blueButton.png"> on the server and sends it to the client, and then the mouse event can access it's DOM property named src at the client.

Look at the HTML source from your browser to see the difference between what you wrote in your ASPX file and the HTML the browser receives.