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代替（这样您将获得应用于该元素的样式的实际值，而不仅仅是style属性上的内容）..
你错过了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 2

@ 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 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>

如果声明不起作用，为什么要把风格放进去？

3 个答案: