使用HTML的hidden属性，隐藏后不占用原来的位置 hidden属性是一个Boolean类型的值，如果想要隐藏元素，就将值设置为true，否则就将值设置为false 选取id为test的元素 let test = document.getElementById('test'); 隐藏选择的元素 test. hidden = true; 显示 test. hidden = false;

使用元素style对象的display属性，隐藏后不占用原来的位置 style对象代表一个单独的样式声明style statement。 选取id为test的元素 let test = document.getElementById('test'); 隐藏选择的元素 test.style.display = 'none'; 以块级样式显示 test.style.display = 'block';

使用元素style对象的visibility属性，隐藏后其位置和大小仍被占用，只是显示为空白 选取id为test的元素 let test = document.getElementById('test'); 隐藏元素 test.style.visibility = 'hidden'; 显示元素 test.style.visibility = 'visible';

w3school

visibility属性规定元素是否可见。 即使不可见的元素也会占据页面上的空间。请使用display属性来创建不占据页面空间的不可见元素。 这个属性指定是否显示一个元素生成的元素框。这意味着元素仍占据其本来的空间，不过可以完全不可见。值collapse在表中用于从表布局中删除列或行。

MDN

visibility是CSS属性显示或隐藏元素而不更改文档的布局。该属性还可以隐藏中的行或列。

方式一和方式二隐藏后不占用原来的位置，方式三进行隐藏后元素位置和大小仍被占用，只是显示为空白。