有些时候我们需要根据某些条件来控制Web页面中的HTML元素显示还是隐藏，可以通过display或visibility来实现。通过下面的例子了解display和visibility的区别，简单的例子代码如下：
-
<html>
-
<head>
-
<title>HTML元素的显示与隐藏控制</title>
-
<scripttype="text/javascript">
-
functionshowAndHidden1(){
-
vardiv1=document.getElementById("div1");
-
vardiv2=document.getElementById("div2");
-
if(div1.style.display=='block')div1.style.display='none';
-
elsediv1.style.display='block';
-
if(div2.style.display=='block')div2.style.display='none';
-
elsediv2.style.display='block';
-
}
-
-
functionshowAndHidden2(){
-
vardiv3=document.getElementById("div3");
-
vardiv4=document.getElementById("div4");
-
if(div3.style.visibility=='visible')div3.style.visibility='hidden';
-
elsediv3.style.visibility='visible';
-
if(div4.style.visibility=='visible')div4.style.visibility='hidden';
-
elsediv4.style.visibility='visible';
-
}
-
</script>
-
</head>
-
<body>
-
<div>display：元素的位置不被占用</div>
-
<divid="div1"style="display:block;">DIV1</div>
-
<divid="div2"style="display:none;">DIV2</div>
-
<inputtype="button"onclick="showAndHidden1();"value="DIV切换"/>
-
<hr>
-
<div>visibility：元素的位置仍被占用</div>
-
<divid="div3"style="visibility:visible;">DIV3</div>
-
<divid="div4"style="visibility:hidden;">DIV4</div>
-
<inputtype="button"onclick="showAndHidden2();"value="DIV切换"/>
-
</body>
-
</html>
-
分享到：
相关推荐
11_元素的隐藏-display-visibility
此外，CSS中也提供了display和visibility属性，用于控制元素的显示和隐藏，这在某些情况下可以与JavaScript一起使用，达到更好的效果。 最后，需要注意的是，在JavaScript中，对页面元素的操作可能会受到CSS样式的...
接着，JavaScript将被用来控制弹窗的显示和隐藏。这可以通过改变弹窗元素的CSS属性，例如`display`或`visibility`来实现。例如，可以设置一个按钮或特定时间触发弹窗显示的事件监听器，使用`element.style.display =...
17. **display:none vs visibility:hidden**：前者完全移除元素，不占用空间；后者隐藏元素但保留其空间。 18. **opacity vs rgba**：两者都能实现透明效果，但opacity会影响所有后代元素，rgba只影响自身。 19. *...
1. 显示隐藏属性：display 2. 盒模型属性：width、height、padding、margin 3. 背景属性：background-color、background-image、background-position、background-size、repeat 4. 文本属性：vertical-align、text-...
- **行内元素**：和其他元素在同一行显示，不能设置宽度和高度。 - **块级元素**：独占一行显示，可以设置宽度和高度。 - 行内元素可以设置左右 `margin` 和 `padding`，但上下 `margin` 和 `padding` 仅影响元素...
- 行内元素与其他元素在同一行显示，而块级元素则独占一行。 - 行内元素可以设置 padding 和 margin，但 margin 的 top 和 bottom 仅影响其周围的元素。 **23. 什么是外边距重叠？重叠的结果是什么？** - 外边距...
### CSS参考手册(第4版,涵盖CSS3)——关键知识点概述 #### 一、基本概念 ##### 1. 添加样式到HTML和XHTML 在HTML或XHTML文档中添加CSS样式是通过以下几种方式实现的： - **内联样式**：通过在HTML元素的属性中直接...
- **问题**: display:none与visibility:hidden的区别是什么？ - **答案**: - `display:none`: 元素不占据空间。 - `visibility:hidden`: 元素占据空间但不可见。 **31. link与@import的区别** - **问题**: CSS中...
在深入探讨CSS的世界之前，先...在实践中，熟练掌握这些CSS知识点能帮助开发者更好地控制网页的样式和布局，创建出美观且功能丰富的网站。随着CSS的发展，更多的新特性不断涌现，持续学习和探索是提升CSS技能的关键。
- **`display:none` 与 `visibility:hidden`**：这两个属性的主要区别在于是否保留元素在页面布局中的空间。`display:none` 完全隐藏元素，并且不会为其保留任何空间；而 `visibility:hidden` 虽然也隐藏了元素，但...
2. **HTML5 显示角色重置**：为了解决某些旧浏览器对于 HTML5 新元素的显示问题，Eric 在其 CSS Reset 中加入了对这些元素的 display 属性设置。 ```css /* HTML5 display-role reset for older browsers */ ...
此外，为了实现文字的隐藏和显示，可以使用CSS的`position`属性来布局元素，并结合`display`或`opacity`属性控制文字的可见性。例如，可以将文字元素定位在图片的后面，然后在翻转时改变其显示状态。 在实际应用中...
通过自定义`getElementsByClassName`函数以及编写`closebox`函数，我们可以有效地管理和控制弹出窗口的状态。此外，通过.NET提供的API，如`Page.ClientScript.RegisterStartupScript`，还可以轻松地在服务器端触发...
本文将详细介绍一个有趣且实用的CSS技巧——当鼠标悬停在特定元素上时，显示隐藏的电话号码。这一效果不仅可以用于个人博客或网站增添互动性，还可以在实际项目中提升用户体验。 #### 实现原理 此功能主要通过CSS...
为了实现配对效果，可以使用CSS的`visibility`和`opacity`属性来控制卡片的状态，如翻开、隐藏等。 3. **交互事件**：HTML支持多种用户交互事件，如`onclick`。当用户点击卡片时，我们需要触发一个JavaScript函数来...
5. **隐藏显示（Visibility and Display）**：Bootstrap的`.d-none`, `.d-sm-block`, `.d-md-inline`, `.d-lg-flex`等类可以帮助控制元素在不同屏幕尺寸下的可见性和展示方式，这对于创建隐藏菜单非常有用。...
1. **创建结构**：首先，在HTML中定义两个主要的div元素——一个用于存放原始小图片（及遮罩层），另一个则用于展示放大的图片。 2. **绑定事件**：利用Vue的事件绑定功能，为包含小图片的div绑定`mouseover`、`...