如何使用JavaScript访问具有runat="server"属性的ASP元素？

Question

似乎每个人都在做这个（在代码贴子等中）……但我不知道怎么做。:(

每当我尝试使用JavaScript操作asp元素时，我会收到"element is null"或"document is undefined"等错误提示。

通常情况下，JavaScript工作得很好，但只有当我添加runat="server"属性时，该元素才对我的JavaScript不可见。

欢迎提出任何建议。

谢谢，Andrew

- Andrew

Answer 1

可能发生的情况是您的元素/控件位于一个或多个作为命名容器的ASP.NET控件中（Master页面、ITemplate、Wizard等），这可能会导致其ID更改。

您可以在浏览器中使用“查看源代码”来确认在呈现的HTML中发生了什么。

如果您的JavaScript位于ASPX页面中，则最简单的临时解决方法是使用元素的ClientID属性。例如，如果您有一个名为TextBox1的控件，希望通过JS引用它：

var textbox = document.getElementById('<%= TextBox1.ClientID %>');

- Dave Ward

---

很棒的回答...但不得不把它给第一个回答的人...虽然感谢你的解释！ - Andrew

@Andrew - 如果这是更好的答案，你应该将其接受为这样。在SO上质量优先于速度。 - Gavin Miller

是的，其实我也是这么想的...会去做的。 - Andrew

Answer 2

让元素添加runat="server"属性后，该元素的客户端ID将根据其所在的ASP.NET命名容器而更改。因此，如果您使用document.getElementById来操作该元素，则需要将由.NET生成的新ID传递给它。请查看ClientId属性以获取生成的ID...您可以像这样在JavaScript中内联使用它：

var element = document.getElementById('<%=myControl.ClientID%>');

- Matt Winckler

Answer 3

如果你有一个文本框：

<asp:TextBox id="txtText" runat="server" />

您可以使用以下方法：

var textBox=document.getElementById('<%=txtText.ClientID %>');

任何WebControl都公开了相同的ClientID属性。

- Program.X

Answer 4

虽然这个问题已经得到了解答，但我想再发一些相关信息...

Rick Strahl提供了一个非常有趣的解决方法来解决这个问题。

http://www.west-wind.com/WebLog/posts/252178.aspx

感谢ASP .NET 4.0的到来，它将允许您精确指定客户端ID是什么！

http://www.codeproject.com/KB/aspnet/ASP_NET4_0ClientIDFeature.aspx

- Sean Taylor

---

+1：对于Rick的好解决方案和.NET 4的新功能表示赞赏。它解决了在外部文件中使用JS时（无法使用诸如<%=txtText.ClientID %>之类的内容）的问题。 - Pavel Hodek