web值控制标签的显示与隐藏、document、getElementById、style、css、hidden、display、visibility

---

方式一

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

---

<button type="button" onclick="show()">显示文本区域</button>
<button type="button" onclick="hide()">隐藏文本区域</button>
<br>
<textarea id="output" cols="70" rows="6">雪景</textarea>
<h3>使用HTML 的hidden 属性，文本区域隐藏后不占用原来的位置</h3>
<img id="pic" src="./雪景.jpg">        

---

function show(){
	// 选取id为test的元素
	let test = document.getElementById('output');
	test.hidden = false; 
}

function hide(){
	// 选取id为test的元素
	let test = document.getElementById('output');
	// 设置隐藏元素
	test.hidden = true;             
}

---

---

方式二

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

---

<button type="button" onclick="show()">显示文本区域</button>
<button type="button" onclick="hide()">隐藏文本区域</button>
<br>
<textarea id="output" cols="70" rows="6">雪景</textarea>
<h3>使用元素style 对象的display属性，文本区域隐藏后不占用原来的位置</h3>
<img id="pic" src="./雪景.jpg">

---

function show(){
	// 选取id为test的元素
	let test = document.getElementById('output');
	test.style.display = 'block'; 
}

function hide(){
	// 选取id为test的元素
	let test = document.getElementById('output');
	// 隐藏选择的元素
	test.style.display = 'none';               
}

---

---

方式三

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

---

<button type="button" onclick="show()">显示文本区域</button>
<button type="button" onclick="hide()">隐藏文本区域</button>
<br>
<textarea id="output" cols="70" rows="6">雪景</textarea>
<h3>使用元素style 对象的visibility属性，文本区域隐藏后其位置和大小仍被占用（只是显示为空白）</h3> 
<img id="pic" src="./雪景.jpg">

---

function show(){
	//选取id为test的元素
	let test = document.getElementById('output');
	test.style.visibility = 'visible'; 
}

function hide(){
	// 选取id为test的元素
	let test = document.getElementById('output');
	// 隐藏元素
	test.style.visibility = 'hidden';              
}

---

---

visibility

w3school

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

---

MDN

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

---

小结

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