javascript - HTML 下拉菜单的自定义属性在 Chrome 中为空，在 IE 中工作正常

Question

这是我的代码。

var arrSelectElements   = document.getElementsByTagName( "SELECT" );

for (var i = 0; i < arrSelectElements.length; i++) { 
      alert(arrSelectElements[i].DataSource); //code to use datasource value
}

它只是获取 aspx 文件中所有选择元素的列表，并找出数据源名称。以下是在 C# 文件中绑定(bind)下拉列表的代码。

ddlSubsidiary.Attributes.Add("DataSource", "Subsidiary");
ddlSubsidiary.Attributes.Add("DataMember", "DISubsidiary");

现在，这段代码在 IE 中可以完美运行了。警报正确返回名称。但在 Chrome 中，它总是返回 undefined。

这是设计使然还是我在这里遗漏了一些东西？

Answer 1

为了在 Internet Explorer 中获取 DOM 元素属性的属性值，您必须使用 IE8 或更早版本，或者以兼容模式运行(相当于 IE7)。在这些旧版本中，可以使用同名的 Expando 属性在客户端代码中检索自定义属性:

var dataSource = ctl.DataSource;
var dataMember = ctl.DataMember;

据我所知，此技术仅适用于 Internet Explorer，不适用于其他浏览器 ( HTML Custom Attributes Not Working in Chrome )。

Since version 9 ，它在 Internet Explorer 中也不起作用。必须使用 getAttribute 方法来获取客户端代码中的属性值:

var dataSource = ctl.getAttribute('DataSource');
var dataMember = ctl.getAttribute('DataMember');