在 aspx 页面中访问 DOM 对象的正确或有效的方法
-
29-09-2020 - |
题
我想获取用户输入的文本框的值。下面是aspx页面的代码片段:
<asp:TextBox id="txtUserName" runat="server" />
现在在 aspx 页面中访问 DOM 对象的最佳方式是什么
1.
<script type="text/javascript">
var value= document.getElementById(<%= txtUserName.ClientID %>).value;
alert(value);
</script>
2.
<script type="text/javascript">
var value= document.getElementById("txtUserName").value;
alert(value);
</script>
解决方案
SharePoint 2013/SharePoint Online
在.NET Framework 4中引入 ClientIDMode 属性 指定 ASP.NET 如何生成 ClientID
用于可以在客户端脚本中访问的控件。
总而言之,由于 SharePoint 2013 以 .NET Framework 4 为目标, ClientIDMode
可以用来简化客户端的控制访问,如下所示:
例子:
<asp:TextBox id="boxUserName" runat="server" ClientIDMode="Static" />
JavaScript:
var boxUserName = document.getElementById("boxUserName")
SharePoint 2010 及更早版本
先决条件: jQuery 库 使用的是提供一组强大的工具,用于匹配文档中的一组元素。
选项1
使用选择器根据Id查找元素,例如:
var quickLaunch = $('[id$=V4QuickLaunchMenu]'); // find element with id which ends with the text 'V4QuickLaunchMenu'
选项2
使用 CssClass
指定元素类,例如:
<asp:TextBox id="boxUserName" runat="server" CssClass="text-box" />
然后使用类选择器:
var boxUserName = $('input.text-box');
参考
其他提示
选项1是正确的方法,但只需将变量名更改为与JavaScript关键字
不同的东西<script type="text/javascript">
var _value= document.getElementById(<%= txtUserName.ClientID %>).value;
alert(value);
</script>
.
但我更愿意使用jquery,使生活变得更加容易。在您的ASPX或MasterPage中添加jQuery文件。然后使用以下行
<script type="text/javascript">
$(document).ready(function(){
var _value= $(<%= txtUserName.ClientID %>).val();
alert(value);
});
</script>
.