带有 if-else 函数的 Onclick 事件不起作用 IE8答案

【问题标题】：Onclick event with if-else function not working IE8带有 if-else 函数的 Onclick 事件不起作用 IE8
【发布时间】：2014-06-11 19:28:01
【问题描述】：

所以我有一个带有 li 的 ul，所有这些都分配了一个 'onclick' 事件来执行函数 Highlight()：

<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ul>

我想要什么：我想在单击时更改单击的 li 的背景颜色以添加颜色为 rgb(160, 216, 239) 的样式，浅蓝色。然后当我再次点击它时，我想删除样式。

当前函数Highlight，结构如下：

function highlight() {
        var elem = this;
        if(elem.style.backgroundColor != "rgb(160, 216, 239)"){
        elem.style.backgroundColor = "rgb(160, 216, 239)";
        }

        else{
        elem.removeAttribute("style");
    };
    }

它在 IE9-IE10、Firefox、Chrome 和几乎所有东西中都能完美运行。它在IE8中不能完全工作，也需要支持。虽然背景确实改变了颜色，但它不会在第二次点击时再次删除样式或颜色。

有什么想法吗？

编辑：

在 CSS 中，我也有：

li:hover{
background-color: #336699;
}

【问题讨论】：

是否调用 elem.getAttribute("style");在 removeAttribute() 工作之前？
请说明您是如何绑定事件的。
@arnold.NET.JS 谁告诉你的？ rgb 是，rgba 不是 AFAIK
console.log(elem) 显示什么？
@Barmar，我将它与 .onclick 事件绑定，因为这是唯一一个真正适用于几乎所有浏览器的事件。因此，例如，“li.onclick = highlight”； console.log(elem) 在 IE8 兼容模式下在 IE10 中返回“[object HTMLLIElement]”。

标签： javascript function internet-explorer-8 onclick

【解决方案1】：

也在 IE8 中测试：jsBin demo

function highlight() { 
  var el = this;
  var io = el.highlighted ^= 1; // Simple 1/0 Toggler
  el.style.backgroundColor = io ? "rgb(160, 216, 239)" : "transparent" ;
}


var $li = document.getElementsByTagName('li');
for(var i=0; i< $li.length; i++)
  $li[i].onclick = highlight;

这个对我有用，所以rgb() 不是问题^{（不支持rgba()！）}
但很可能是您分配点击事件的方式（即 addEventListener in not supported in IE8）

【讨论】：

点击事件第一次起作用但第二次不起作用，这意味着获取背景颜色是不起作用的部分。应该使用诸如 getComputedStyle/getPropertyValue 之类的函数来完成
您好，谢谢，这确实有效。但是，我忘了在 CSS 中添加它，我有一个 li:hover，它将背景颜色更改为不同的颜色。所以有三个阶段：悬停，单击，再次单击。使用它来解决最初的问题，但是，当我“悬停”在它上面时，它也会使 innerHTML 消失。让我进行编辑。不过谢谢！
@user2588440 你试过用：background-color: #336699 !important; 吗？顺便说一句，在您的评论中，您说某些 HTML 消失了……innerHTML 可能与样式有什么关系？
我不是指innerHTML 数据，我指的是文本。它不会从 DOM 中消失，当我将鼠标悬停在它上面时，它现在变得透明了。或者说，变成了。添加 !important 就成功了！谢谢你。那个“^= 1”切换是什么？我以前从未听说过它，它似乎使它起作用。