css点击显示和隐藏div(js怎样显示隐藏多个div)

其实css点击显示和隐藏div的问题并不复杂，但是又很多的朋友都不太了解js怎样显示隐藏多个div，因此呢，今天小编就来为大家分享css点击显示和隐藏div的一些知识，希望可以帮助到大家，下面我们一起来看看这个问题的分析吧！

js控制div的显示和隐藏

使用JavaScript控制div的显示隐藏，通常是修改div元素的display为none。

display属性定义和用法

display属性规定元素应该生成的框的类型。

display属性可能的值

JavaScript控制div的隐藏

比如我们有一个id为div1的div元素

<divid="div1"></div>隐藏，代码如下

document.getElementById("div1").style.display="none";显示，代码如下

document.getElementById("div1").style.display="block";

其他方式

除了修改display,还可以通过修改元素的宽度和高度为零实现隐藏效果。

css中display怎么做显示或隐藏

display：none可以隐藏某个元素，且隐藏的元素不会占用任何空间。该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

display：block可以显示一个块元素，或者display：inline是显示一个内联元素。

display主要用的CSS样式有以下三个：

display:block——显示为块级元素。

display:inline——显示为内联元素。

display:inline-block——显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性。

扩展资料：

显示的块级元素(block)特性：总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

显示的内联元素(inline)特性：和相邻的内联元素在同一行;宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;

块级元素主要有：address, blockquote, center, dir, div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframes, noscript, ol, p, pre, table, ul, li等css属性。

内联元素主要有：a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, font, i, img, input, kbd, label, q, s, samp, select, small, span, strike, strong, sub, sup,textarea, tt, u, var等css属性。

css transition在弹窗显示隐藏效果中的应用

使用CSS transition实现弹窗显示隐藏效果，可通过组合opacity、transform和visibility属性，避免直接切换display属性，从而创建流畅的淡入淡出和缩放动画。

1.核心原理transition的作用：控制CSS属性变化的动画过程，但仅适用于可过渡的属性（如opacity、transform、visibility等），不可用于display。关键属性组合：opacity：控制透明度，实现淡入淡出效果。

transform：通过scale()或translateY()实现缩放或位移动画。

visibility：控制元素是否可见及可交互，避免隐藏状态下误触。

2.实现步骤步骤1：基础弹窗样式定义弹窗容器（.modal）的初始状态为隐藏，并设置过渡效果：

.modal{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; visibility: hidden;/*初始隐藏*/ opacity: 0;/*完全透明*/ transition: opacity 0.3s ease, visibility 0.3s ease;/*过渡效果*/}步骤2：显示弹窗（添加.show类）通过添加.show类触发动画，使弹窗淡入：

.modal.show{ visibility: visible;/*可见*/ opacity: 1;/*完全不透明*/}步骤3：增强缩放动画为弹窗内容（.modal-content）添加缩放效果，使其从小变大：

.modal-content{ transform: scale(0.8);/*初始缩小*/ transition: transform 0.3s ease;/*缩放过渡*/}.modal.show.modal-content{ transform: scale(1);/*恢复原始大小*/}3.完整代码示例<div class="modal"><div class="modal-content">我是弹窗内容</div></div><button onclick="document.querySelector('.modal').classList.toggle('show')">切换弹窗</button>.modal{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; visibility: hidden; opacity: 0; transition: opacity 0.3s ease, visibility 0.3s ease;}.modal.show{ visibility: visible; opacity: 1;}.modal-content{ transform: scale(0.8); transition: transform 0.3s ease; background: white; padding: 20px; border-radius: 8px;}.modal.show.modal-content{ transform: scale(1);}4.注意事项避免使用display: none/block：display不可过渡，直接切换会导致动画跳过，应使用visibility和opacity替代。控制交互时机：隐藏状态下可通过pointer-events: none禁止点击：.modal{ pointer-events: none;/*初始禁止交互*/}.modal.show{ pointer-events: auto;/*显示后允许交互*/}

或仅依赖visibility（隐藏时自动禁用交互）。

过渡时间建议：通常设置为0.2s~0.5s，过长会显得卡顿，过短则动画不明显。

性能优化：优先使用transform和opacity，它们不会触发重排（reflow），仅触发重绘（repaint），性能更好。

5.扩展效果位移动画：用translateY()实现从底部滑入效果：.modal-content{ transform: translateY(50px);}.modal.show.modal-content{ transform: translateY(0);}组合动画：同时使用缩放和位移：.modal-content{ transform: scale(0.8) translateY(50px);}.modal.show.modal-content{ transform: scale(1) translateY(0);}通过合理组合CSS属性，无需JavaScript动画库即可实现自然流畅的弹窗效果，显著提升用户体验。

END，本文到此结束，如果可以帮助到大家，还望关注本站哦！