文章目录
- 方式一
- 方式二
- 方式三
- 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>
中的行或列。
小结
方式一和方式二隐藏后不占用原来的位置,方式三进行隐藏后元素位置和大小仍被占用,只是显示为空白。