Question

我的代码在Firefox中用于切换图像上的边框，但在IE中不起作用。有什么想法吗？在IE中，第一次单击将添加边框，但第二次单击将不会再次删除边框。

谢谢，莱斯利

<html>
<head>

<script type="text/javascript">

window.onload=function(){

    for(var i = 0; i < document.images.length; i++){
        document.images[i].onclick=function(){
        if(this.style.border == '2px solid red')
        {
            this.style.border='';
        }
        else this.style.border='2px solid red';
        }
    }

}

</script>

</head>
<body>
    <div>
        <img src="Cat.jpg" width="250"/>
        <img src="Dog.jpg" width="250"/>
        <img src="Fish.jpg" width="250"/>
    </div>

</body>
</html>

Answer 1

你已经使用了if(this.style.border == '2px solid red')，而且它对于FF来说非常严格 IE返回red 2px solid，因此如果条件与IE不匹配。你可以试试这个

window.onload=function(){
for(var i = 0; i < document.images.length; i++)
{
    document.images[i].onclick=function(){
        if(this.style.borderColor == 'red' && this.style.borderStyle=='solid' && this.style.borderWidth=='2px')
        {
            this.style.border='none';
        } 
        else this.style.border='2px solid red';
      }
    }
}

DEMO.

备选方案： DEMO 或 DEMO（当您有其他课程时效果更佳）。

Answer 2

http://jsfiddle.net/BPPvv/1/

注意返回的差异。这可能只是一个IE问题 - 您应该使用类分配而不是字符串比较

for(var i = 0; i < document.images.length; i++)
       {
        alert(this.style.border);
        document.images[i].onclick=function(){
        if(this.style.border == '2px solid red')
         {
            this.style.border='';
         }
        else 
         { // missed this bracket AND shorthand for borders should be
         this.style.border='2px solid red';
         }
       }

    }

Javascript切换图像边框适用于Firefox但不适用于IE

2 个答案: