Question

所以我有一个带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）的浅蓝色样式。然后，当我再次点击它时，我想删除该样式。

当前功能突出显示，结构如下：

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中完全不起作用，IE8也需要支持。当背景改变颜色时，它不会在第二次点击时再次删除样式或颜色。

任何想法？

编辑：

在CSS中，我也有：

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

Answer 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()不受支持！）}
但很可能是你分配点击事件的方式（即IE8中不支持 addEventListener ）

使用if-else函数的Onclick事件不能正常工作IE8

1 个答案: