如果語句不起作用，爲什麼要放入樣式？

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

@ Dekel的回答已經解釋了你的代碼出了什麼問題。但是，您應該使用類來處理。這不僅是方式比檢索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. 您應該使用window.getComputedStyle，而不是（這樣你會得到應用於元素的樣式的實際價值，而不僅僅是什麼是對style屬性）..
2. 你缺少一個else有（否則你總是會得到兩個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>