【JavaScript】隐藏显示元素（实用）

方式

概念	描述
获取元素	let element = document.getElementById('id')
页面的位置被占用显示空白	`element.style.visibility = 'hidden(隐藏)
页面的位置不被占用	`element.style.display = 'none(隐藏)
将其属性设置成隐藏	element.hidden = 'true(隐藏)'
将其隐藏属性删除	element.removeAttribute('hidden')

页面的位置被占用

// 获取元素
let element = document.getElementById('id')
// 页面的位置依旧会被占用，但是显示空白
element.style.visibility = 'hidden(隐藏) || visible(可见)'

页面的位置不被占用

// 获取元素
let element = document.getElementById('id')
// 页面的位置依旧会被占用，但是显示空白
element.style.display = 'none(隐藏) || inline(可见)'

操作本身属性

// 获取元素
let element = document.getElementById('id')
// 隐藏元素
element.hidden = 'true(隐藏)'
// 取消隐藏
element.removeAttribute('hidden')