javascript - DOM 节点 "display"样式变量指针不更新样式

Question

我是初学者，我在这里创建了一个事件监听器，它可以工作:

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';
 }
});

为什么这行不通？谢谢!

Answer 1

您没有为 display 属性设置 style，但您只是为变量 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';
});