本文介绍JavaScript中控制DIV元素显示与隐藏的两种主要方式：通过style对象的display属性和visibility属性。两者核心区别在于，设置display为none时元素不占用页面空间，而visibility为hidden时元素仍占据原有位置。文章提供了完整的代码示例及对比效果说明。
具体实现方法如下：
第一种方式是利用style对象的display属性。将该属性值设置为“none”即可隐藏指定的div元素，若需重新显示，则将其值设为“block”。
第二种方式是利用style对象的visibility属性。将该属性值设置为“hidden”可隐藏div元素，若需显示，则将其值设为“visible”。
本文测试环境基于windows7系统，JavaScript版本为1.8.5，运行设备为Dell G3电脑。
在JavaScript中，隐藏和显示div元素主要有以下两种实现途径：
途径一：修改元素style对象中的display属性。
var t = document.getElementById('test');//选取id为test的div元素
t.style.display = 'none';// 隐藏选择的元素
t.style.display = 'block';// 以块级样式显示途径二：修改元素style对象中的visibility属性。
var t = document.getElementById('test');//选取id为test的div元素
t.style.visibility = 'hidden';// 隐藏元素
t.style.visibility = 'visible';// 显示元素这两种方式的关键区别在于布局影响：使用display隐藏元素后，该元素不再占用原有的页面位置；而使用visibility隐藏元素后，该元素在页面上依然保留其原有的空间占用。
具体效果对比如下：
第一种方式在隐藏操作前的状态。
隐藏后，该元素不再占用原来的位置。
第二种方式在隐藏操作前的状态。
第二种方式隐藏后，元素仍然占据原来的位置。
完整的实现代码如下：
<head>
<script type="text/javascript">
function fn1(){
var t = document.getElementById('test');
if(t.style.display === 'none') {
t.style.display = 'block';// 以块级元素显示
} else {
t.style.display = 'none'; // 隐藏
}
}
function fn2(){
var t = document.getElementById('test');
if(t.style.visibility === 'hidden') {
t.style.visibility = 'visible';
} else {
t.style.visibility = 'hidden';
}
}
</script>
</head>
<body>
<div id="test" style="border: solid 1px #e81515; width:500px;">
这是一个将要隐藏的DIV。<br>
这是一个将要隐藏的DIV。<br>
这是一个将要隐藏的DIV。<br>
这是一个将要隐藏的DIV。<br>
</div>
<button onclick="fn1()">第一种方式</button>
<button onclick="fn2()">第二种方式</button>
</body>总结
至此，关于JavaScript中隐藏和显示div的方法介绍完毕。如需了解更多相关js隐藏显示div的内容，建议搜索本站历史文章或继续浏览下方相关文章。感谢大家的支持！