让元素不显示的方法

CSS

占空间

1. visibility:hidden : 不可交互

2. opacity:0 : 设置透明度,注意,设置透明度比较特殊,他是可交互的

3. transform:scale(0) : 不可交互,缩放为0倍,注意transform是在绘制阶段才处理,也就是他不会影响元素的占位

4. z-index: -1 : 不可交互,在定位元素/flex子项/grid子项设置z-index为-1,会被除了根元素的背景和边框和显式设置了z-index小于他的元素以外的元素覆盖起来,但是不可靠,因为需要保证有元素覆盖他,另外他不会影响布局,但是元素是可以覆盖在他上面的

   注意: z-index属性只有在定位元素,flex子项,grid子项上设置才有效

不占空间

1. display: none : 不可交互,把html设置hidden属性本质上也是用的这个
2. 宽高为0+overflow:hidden : 不可交互,注意设置margin为0,另外需要注意,因为如果是IE盒子不占位置,但是如果是标准盒子padding和border可能还是会占位(因为padding和margin还可能占位),另外如果设置了min-width/min-height隐藏会失效

特殊:

1. 文本和背景色设置相同
2. 移出屏幕: 即把位置设置成屏幕外如-99999

JS

不占空间:

1. 元素.remove() / 父元素.removeChild(子元素) : 从dom中彻底移除,不过可以提前用变量备份一份元素,如果想拿回来只需要指定父元素,父元素.appendChild(元素)即可

占空间:

1. 元素.innerHTML='' : 保留这个元素标签,移除内容(子标签也跟内容一样会被都移除),准确来说占不占空间取决于元素内容消失之后元素本身是否还占位置,并且css不会消失,即如果设置了padding或者margin或者width这种还是会占空间

**现代一般用模块化方式:**即写一个hidden类用js动态控制

//先定义一个css类
.hidden{
    
}

//用js动态控制,比如想控制id为app的元素的显示隐藏
const node=document.getElementsById('app')
node.classList.add('hidden')//添加hidden类名,应用hidden样式
node.classList.toggle('hidden')//当前有hidden的话移除,当前无hidden的话添加