我是一个初学者,我在这里创建了一个事件监听器,该监听器可以正常工作:

var inpt = document.getElementsByTagName('input')[0];

plus.addEventListener("click", function() {
  if(inpt.style.display === 'none'){
    inpt.style.display = 'block';
  } else {
    inpt.style.display = 'none';
  }
});


但是当我将'inpt.style.display'的值分配给变量并重试时,它不起作用:

var inpt = document.getElementsByTagName('input')[0];

plus.addEventListener("click", function() {
 var disp = inpt.style.display;
 if(disp === 'none'){
   disp = 'block';
 } else {
   disp = 'none';
 }
});


为什么不起作用?谢谢!

最佳答案

您无需为style属性设置display,而只是为变量disp设置新值...

disp是指向原语值的变量,这意味着它不知道它是“连接”到inpt.style.display的,因此,当您更改disp变量时,它将永远不会影响inpt.style.display

如果它指向一个对象,它可能只会影响它,例如:

var disp = inpt.style; // style is an Object which has the "display" property


您必须直接更改display属性:

inpt.style.display = 'block';


等等。



尝试这个:

var inpt = document.querySelector('input'); // changed to "querySelector"

plus.addEventListener("click", function() {
    inpt.style.display = inpt.style.display === 'none' ? 'block' : 'none';
});

10-05 20:47
查看更多