我是一个初学者,我在这里创建了一个事件监听器,该监听器可以正常工作:
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';
});