IE 9的getAttribute方法正常工作

Question

我正在使用setAttribute方法設置一個名為（say）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值。 出於類似的原因，不僅使您不會混淆自己和其他人，我會盡量避免將它們作為變量名。

就是說，我無法復制問題 （ 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);
  }
})();

現場示例 | 資源

如果使用F12開發人員工具並轉到HTML選項卡，則可以看到div確實獲得了該屬性。 （請確保使用開發工具， 而不是 “查看源代碼”，“查看源代碼”將顯示從服務器發送的HTML，而不是DOM的當前狀態。）

---

旁注：使用不使用data-前綴的非標准屬性不是一個好主意。 您可能想要將信息向上傳遞給決定該信息的任何人。 但這幾乎不是您遇到的問題。