IE 9 getAttribute 方法工作

Question

我正在使用 setAttribute 方法设置一个名为（比如）titleDiv 的自定义属性

HTML 代码： <div id="Object" titleDiv="blank"></div>

Javascript 代码：

var Object=document.getElementById('Object'); Object.setAttribute("titleDiv","myDiv");

这在 IE 9 以外的所有浏览器中都可以正常工作。 getAttribute 也会发生同样的事情。

我在代码中广泛使用了上述自定义属性，我不应该更改结构。

上面的代码有什么替代方法可以让 IE 理解吗？

谢谢。

Answer 1

更新答案基于问题编辑：

您正在使用您真正应该远离的标识符：Object。我建议同时更改id 和您使用的变量的名称。所以：

<div id="theObject" titleDiv="blank"></div>

和

var theObject=document.getElementById('theObject');
theObject.setAttribute("titleDiv","myDiv");

Object 是 JavaScript 中的内置函数。由于元素的 id 被转储到全局命名空间中，我将避免使用任何内置 JavaScript 函数（Object、Function、Date 等）作为 id 值。出于类似的原因，不仅仅是为了不让自己和他人混淆，我会远离它们作为变量名。

也就是说，我 couldn't replicate the problem (source)，所以虽然我仍然会更改 id 和变量名，但这可能不是问题。另见下文。

---

原答案：

您在 DOM 元素实例上调用 setAttribute。你不能通过内置的Object 函数来做到这一点。

如果你使用 DOM 元素，它可以工作（即使在 IE9 上）：

(function() {
  // Get an actual DOM element
  var target = document.getElementById("target");

  // Set the attribute
  target.setAttribute("titleDiv","myDiv");

  // Show the result
  display("Result: " + target.getAttribute("titleDiv"));

  function display(msg) {
    var p = document.createElement('p');
    p.innerHTML = String(msg);
    document.body.appendChild(p);
  }
})();

Live Example | source

如果您使用 F12 开发人员工具并转到 HTML 选项卡，您可以看到 div 确实获得了该属性。 （请务必使用开发工具，不是“查看源代码”——“查看源代码”会显示从服务器发送的 HTML，而不是 DOM 的当前状态。）

---

旁注：使用不使用the data- prefix 的非标准属性是个坏主意。您可能希望将该信息向上提供给指定此信息的任何人。但这几乎肯定不是您遇到的问题。