1

以下のコードは Firefox で動作し、画像の境界線を切り替えますが、IE では動作しません。理由はありますか？IE では、最初のクリックで境界線が追加されますが、2 回目のクリックでは境界線が削除されません。

ありがとう、レスリー

<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 の場合は正しいのですがred 2px solid、条件が IE と一致しない場合は 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 に答える