javascript怎么隐藏显示div

设置方法：1、使用style对象的display属性，值为“none”可隐藏div元素，值为“block”可显示元素；2、使用style对象的visibility属性，值为“hidden”可隐藏div元素，值为“visible”可显示元素。

本教程操作环境：windows7系统、javascript1.8.5版、Dell G3电脑。

JS隐藏和显示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>

<button onclick="fn1()">第一种方式</button>

<button onclick="fn2()">第二种方式</button>

</body>

【推荐学习：javascript高级教程】

以上就是javascript怎么隐藏显示div的详细内容，更多请关注php中文网其它相关文章！

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

专题推荐：javascript隐藏显示div

javascript怎么隐藏显示div相关推荐

js隐藏显示div页面方法
今天呢,给大家分享一下,通过js来隐藏显示首先,先上图这是js代码这是H5及css样式效果图,由于用于测试,比较简陋,不要在意,哈哈哈哈! 给大家测试代码,有需要可以复制 <scrip ...
JS隐藏/显示div标签
代码如图: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF- ...
【JavaScript】隐藏显示元素（实用）
方式概念描述获取元素 let element = document.getElementById('id') 页面的位置被占用显示空白 `element.style.visibility = ' ...
显示和隐藏一个div的问题
显示和隐藏div的问题代码: <!DOCTYPE html> <html><head><meta charset="utf-8"> ...
js点击显示div，点击取消隐藏div
js点击显示div,点击取消隐藏div <script language="javascript" type="text/javascript"> ...
php隐藏指定id的div,CSS_纯css3显示隐藏一个div特效的具体实现，复制代码代码如下: !DOCTYPE H - phpStudy...
纯css3显示隐藏一个div特效的具体实现复制代码代码如下: #showDiv { background-color:red; width:300px; height:300px; display: ...
html中和over怎么显示div,js 解决隐藏与显示div的相关问题
有仿照一个网站的功能做导航,但是我的导航中就有一栏产品中心下面用隐藏个div然后鼠标放上去就显示出来,但是导航那一块div一直出不来,什么都没有,不知道是什么原因? 下面是页面的代码: 复制代码代码如 ...
React 点击按钮显示div与隐藏div
<!DOCTYPE html> <html><head><meta charset="UTF-8" /><title>R ...
用javascript来完成显示和隐藏的案例
显示和隐藏开发工具与关键技术:DW javascript 作者:沈金凤年级:18级(5)班撰写日期:2019年2月7日用javaScript来完成显示和隐藏首先要编写好html和css样式,再 ...

javascript怎么隐藏显示div

javascript怎么隐藏显示div相关推荐

最新文章

热门文章