0

我有下一个链接：

<a id="HeaderImage1Tab" style="display: block;" onclick="HeaderImage1Tab(this);" href="javascript:void(0)">- Header Image 1</a>

单击此链接调用下一个 js 代码：

function HeaderImage1Tab(link) {
    if (link.innerText == "+ Header Image 1") {
        document.getElementById("HeaderImage1Table").style.display = 'block';
        link.innerText = "- Header Image 1";
    } else {
        document.getElementById("HeaderImage1Table").style.display = 'none';
        link.innerText = "+ Header Image 1";
    }
}

基本上它所做的只是在链接下方显示/隐藏表格块。除 Firefox 外，所有浏览器均适用。在 Firefox 中，我需要双击链接以触发代码并查看表格块。奇怪的是，我只需要第一次双击，然后按预期工作。

更新 #1：我正在处理 asp.net 网站。我在同一页面上也有大约 15 个链接，就像我上面提到的那样。

解决了

更新#2：使用textContent而不是innerText解决问题。看来火狐不支持inner text。

更新 #3： 这个JS 解决textContent了 IE8 和更早版本中的问题：

if (Object.defineProperty && Object.getOwnPropertyDescriptor &&
     Object.getOwnPropertyDescriptor(Element.prototype, "textContent") &&
    !Object.getOwnPropertyDescriptor(Element.prototype, "textContent").get)
  (function() {
    var innerText = Object.getOwnPropertyDescriptor(Element.prototype, "innerText");
    Object.defineProperty(Element.prototype, "textContent",
      { 
        get : function() {
          return innerText.get.call(this)
        },
        set : function(x) {
          return innerText.set.call(this, x)
        }
      }
    );
  })();
4

1 回答 1

3

正如 Felix Kling 在评论中所说，FireFox 不支持 innerText，您必须使用 textContent （此处）。

双击可以显示和隐藏表格的原因是，第一次单击时，它会将由于该属性不存在而未定义的 link.innerText 与“+ Header Image 1”进行比较。这些值不相等，因此您的第二个代码块运行，在链接对象上创建一个 innerText 属性并将其设置为“+ Header Image 1”。之后，您的逻辑将起作用（尽管它无法成功更改链接中的实际文本），因为 Javascript 将允许您在任何对象上设置属性，即使这些属性不做任何事情。

于 2013-03-18T20:23:37.600 回答