在 Edge 和 IE 中通过 JavaScript 设置输出元素的值

Question

我有一个 output 标签，其值是通过 JavaScript 动态设置的。这在 Chrome 和 Firefox 中工作得很好，但 Microsoft 浏览器（IE 和 Edge）似乎无法识别它，并且 value 对于这些标签总是空的。

HTML:

    document.getElementById("owned").value = "Test 1";    
    document.getElementById("used").value = "Test 2";

    <output class="output" id="owned"></output>
    <output class="output" id="used"></output>

它甚至在我运行 Stack Overflow 上的代码片段时也有效。

问题：为什么没有在这些浏览器上设置这些值？是否有文件必须导入我的 HTML 才能在 IE/Edge 上运行？

Answer 1

使用 span 和 .innerHTML。 <output> HTML 标签似乎在 Edge 上不起作用。

Answer 2

Microsoft Edge 添加了对 <output> in version 14*.

的支持

现在，您可以测试支持，可选择写入 textContent 属性：

var used = document.querySelector("#used");
var owned = document.querySelector("#owned");

// Temporarily fall back to textContent
var property = "value" in used ? "value" : "textContent";
used[ property ] = "Test 1";
owned[ property ] = "Test 2";

<output class="output" id="owned"></output>  
<output class="output" id="used"></output>

^{*在撰写本文时，MS Edge 14 仅适用于 Insiders. It is scheduled for release on August 2, 2016 (Windows 10 Anniversary Update)}

Answer 3

这是 IE11 中 <output> 元素的 polyfill：

if (window.HTMLOutputElement === undefined) {
  Object.defineProperty(HTMLUnknownElement.prototype, 'value', {
    get: function () {
      if (this.tagName === 'OUTPUT') {
        return this.textContent;
      }
    },
    set: function (newValue) {
      if (this.tagName === 'OUTPUT') {
        this.textContent = newValue;
      }
    }
  });
}

只测试了 getting/setting value 属性。

在 Edge 和 IE 中通过 JavaScript 设置输出元素的值

Setting Value of Output Element via JavaScript in Edge and IE

html

javascript

internet-explorer-11

microsoft-edge