<html>
<head>
<title>测试visibility和display</title>
<script language="javascript">
function showPanle(flag) {
var textDan = document.getElementById("text-dan");
if (!flag) {
textDan.style.visibility = "hidden"; // 隐藏指定的区域(注:只是这个区域不显示)
} else {
textDan.style.visibility = "visible"; // 显示隐藏的区域
}
}
function playPanle(flag) {
var loveDan = document.getElementById("love-dan");
if (!flag) {
loveDan.style.display = "none"; // 去掉指定的区域(注:和visibility的区别)
} else {
loveDan.style.display = "block";
}
}
function test(flag) {
var love = document.all("love"); // 也可以这么弄: document.getElementById("love");
if (!flag) {
love.style.visibility = "hidden"; // 隐藏指定的区域(注:只是这个区域不显示)
} else {
love.style.visibility = "visible"; // 显示隐藏的区域
}
}
</script>
</head>
<body>
<div id="text-dan">
<h1>阿妹!阿哥想你!</h1>
</div>
<input type="button" onClick="showPanle(false);" value="隐藏">
<input type="button" onClick="showPanle(true);" value="显示">
<p> </p>
<div id="love-dan">
<h1>真的好想你!</h1>
</div>
<input type="button" onClick="playPanle(false);" value="隐藏">
<input type="button" onClick="playPanle(true);" value="显示">
<p> </p>
<div id="love">
<h1>爱!</h1>
</div>
<input type="button" onClick="test(false);" value="隐藏">
<input type="button" onClick="test(true);" value="显示">
</body>
</html>
相关推荐
### Display与Visibility的区别 在网页布局与样式设计中，`display`与`visibility`属性是控制元素显示状态的两种常用方式。尽管它们都能达到隐藏或显示元素的目的，但两者之间存在本质的区别。本文将深入探讨这两种...
在CSS中，隐藏元素的方法主要有三种：`display:none`、`visibility:hidden`和`opacity:0`，它们各自有不同的特点和适用场景。 1. `display:none`：此属性会使元素完全从页面布局中消失，不占据任何空间。元素及其...
总之，`visibility`和`display`在CSS中扮演着不同的角色，`visibility`关注的是元素的可见状态，而`display`则涉及元素在布局中的存在状态。了解它们的差异并合理运用，可以帮助我们更好地控制网页的显示效果和用户...
在style属性中，有两个常用的属性可以用来控制元素的显示与隐藏：visibility和display。尽管这两个属性的目的相似，即控制元素的可见性，但它们在实现上有着明显的区别，这些区别对页面布局和元素的交互性有深远的...
总的来说，`visibility`和`display`都是CSS中强大的工具，用于控制元素的可见性和布局。理解它们的区别并正确使用，可以让你在创建网页时更加灵活，同时也能避免可能对SEO产生的负面影响。在实际工作中，开发者应...
JS 中 style.display 和 style.visibility 的区别实例说明 在 JavaScript 中，style.display 和 style.visibility 是两种常用的控制元素显隐的方法，但是它们之间有着根本的区别。 style.display style.display ...
在网页布局和样式设计中，`display` 和 `visibility` 是两个非常重要的CSS属性，它们都能用来控制元素的可见性，但实现方式和效果大不相同。本篇文章将深入探讨两者之间的区别，并通过示例来具体说明。 首先，`...
在网页设计和开发中，`display` 和 `visibility` 是两个非常重要的CSS属性，它们用于控制元素在页面上的可见性和布局。这篇博客文章通过代码示例深入探讨了这两个属性的区别和用法。 首先，`display` 属性主要用于...
总结来说，`display` 和 `visibility` 的主要区别在于： 1. `visibility` 只改变元素的可见性，不改变布局，隐藏后仍保留空间。 2. `display` 不仅改变可见性，还影响布局，隐藏后不再占用空间。 在实际应用中，...
`visibility:hidden` 和 `display:none` 的主要区别在于，前者隐藏元素的同时保留其占据的空间，而后者则完全从布局中移除元素。这种差异在处理页面布局时尤为关键。例如，如果一个元素的 `display` 被设置为 `none`...
在CSS中，`display`和`visibility`两个属性都是用于控制元素在页面上的显示状态，但它们的作用方式和效果有着显著的区别。 `display`属性主要影响元素的布局和类型。它有多种不同的值： 1. `block`：将元素转换为...
总之，`display`和`visibility`都是控制元素可见性的工具，但它们的核心区别在于是否保留元素的布局空间。`visibility:hidden`仅隐藏元素内容，保留空间；而`display:none`则同时移除元素及其占用的空间。了解这两者...
前言： 在使用css隐藏栏位或物件的时候， 常常会使用到display:none和visibility:hidden这两个属性， 但却很容易分不清楚这两个的差别， 或是乾脆同时使用两种属性，来确保物件一定被隐藏， 其实我们可以很简单的来...
CSS中的`visibility`和`display`属性都是用来控制元素的可见性，但它们在实际应用中有着显著的区别。首先，`display:none;`会使得元素完全从页面布局中移除，不再占用任何空间。这意味着元素及其内容在文档流中不再...
为了获取display:none元素的尺寸，一个常见的方法是临时将该元素的display属性更改为visibility:hidden，从而使其获得尺寸信息，再通过计算其样式来获得高度和宽度。但是，这会导致元素暂时变为可见，可能会在页面上...