ifステートメントの内部にスタイルを入れているのはなぜですか？

Question

私はjsファイルをクリックし、基本的なトグルをやろうとしている...私はこの

<div id="box"></div> 
<button id="btn"></button> 

#box { 
    background: black; 
    width: 50px; 
    height: 50px; 
    position: absolute; 
    left: 50px; 
} 

JSあります

var btn = document.getElementById('btn'); 
var box = document.getElementById('box'); 

btn.addEventListener('click', function(){ 

    if (box.style.left === '50px') { 
    box.style.left = '200px'; 
    } 

    if (box.style.left === '200px') { 
    box.style.left = '50px'; 
    } 

}); 

を、私はそれを見て、これは誰もがために使用する方法であると思われます純粋なjsをクリックしてトグルするので、私はなぜそれが私のために働いていないのか分かりません。

Answer 1

@あなたのコードに何が間違っていたかについての説明は既にあります。ただし、代わりにクラスで作業する必要があります。このように高速window.getComputedStyleを取得するよりもあるだけでなく、それはまた、はるかに簡単だ

var btn = document.getElementById('btn'); 
 
btn.addEventListener('click', function() { 
 
    var box = document.getElementById('box'); 
 
    box.classList.toggle('left-50'); 
 
    box.classList.toggle('left-200'); 
 
});

.left-50 { 
 
    left: 50px; 
 
} 
 

 
.left-200 { 
 
    left: 200px; 
 
} 
 

 
#box { 
 
    background: black; 
 
    width: 50px; 
 
    height: 50px; 
 
    position: absolute; 
 
}

<div id="box" class="left-50"></div> 
 
<button id="btn">bt</button>

Answer 2

1. あなたは（この方法は、あなたがstyle属性にちょうど何をその要素に適用されるスタイルの実際の値を取得し、しません）の代わりにwindow.getComputedStyleを使用する必要があります。..
2. あなたがそこにelseが欠落しています（そうでなければ、常に2つのifを取得すると何も変わらないだろう）

var btn = document.getElementById('btn'); 
 
var box = document.getElementById('box'); 
 

 
btn.addEventListener('click', function(){ 
 
    if (window.getComputedStyle(box).left === '50px') { 
 
    box.style.left = '200px'; 
 
    } else if (window.getComputedStyle(box).left === '200px') { 
 
    box.style.left = '50px'; 
 
    } 
 

 
});

#box { 
 
    background: black; 
 
    width: 50px; 
 
    height: 50px; 
 
    position: absolute; 
 
    left: 50px; 
 
}

<div id="box"></div> 
 
<button id="btn"></button>

Answer 3

より良いオフセットを使用します。あなたの横には、ここで一種のトグル操作が行われています。一方、スクリプトを修正して動作させました。

<div id="box"></div> 
<input type="button" id="btn" value=" Try it "> 
<style> 
#box { 
    background: black; 
    width: 50px; 
    height: 50px; 
    position: absolute; 
    left: 50px; 
} 

</style> 

<script> 
var btn = document.getElementById('btn'); 
var box = document.getElementById('box'); 

btn.addEventListener('click', function(){ 


    if (box.offsetLeft == 50) { 
     box.style.left = 200 ; 

    } 
    else if (box.offsetLeft == 200) { 
     box.style.left = 50; 

    } 


}); 
</script>