javascript - 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 的非标准属性是个坏主意。您可能希望将该信息沿链向上提供给任何指示此信息的人。但这几乎肯定不是您遇到的问题。