1

我下面的代码在 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>
4

2 回答 2

2

你已经使用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（如果你有其他课程更好）。

于 2012-05-09T22:48:51.377 回答
0

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';
         }
       }

    }​
于 2012-05-09T22:26:48.740 回答