CSS属性中Display与Visibility的不同
大多数人很容易将CSS属性display和visibility混淆,它们看似没有什么不同,其实它们的差别却是很大的。
visibility属性用来确定元素是显示还是隐藏,这用visibility="visible|hidden"来表示,visible表示显示,hidden表示隐藏。当visibility被设置为"hidden"的时候,元素虽然被隐藏了,但它仍然占据它原来所在的位置。例:
<script language="JavaScript">
function toggleVisibility(me){
if (me.style.visibility=="hidden"){
me.style.visibility="visible";
}
else {
me.style.visibility="hidden";
}
}
</script> <div onclick="toggleVisibility(this)" style="position:relative">第一行文本将会触发"hidden"和"visible"属性,注意第二行的变化。</div>
<div>因为visibility会保留元素的位置,所以第二行不会移动.</div>
注意到,当元素被隐藏之后,就不能再接收到其它事件了,所以在第一段代码中,当其被设为"hidden"的时候,就不能再接收响应到事件了,因此也就无法通过鼠标点击第一段文本令其显示出来。
而display属性就有一点不同了。visibility属性是隐藏元素但保持元素的浮动位置,而display实际上是设置元素的浮动特征。当display被设置为block(块)时,容器中所有的元素将会被当作一个单独的块,就像<div>元素一样,它会在那个点被放入到页面中。(实际上你可以设置<span>的display:block,使其可以像<div>一样工作。将display设置为inline,将使其行为和元素inline一样---即使它是普通的块元素如<div>,它也将会被组合成像<span>那样的输出流。最后是display被设置:none,这时元素实际上就从页面中被移走,它下面所在的元素就会被自动跟上填充。下面看我实例的代码和效果:
例:
<script language="JavaScript">
function toggleDisplay(me){
if (me.style.display=="block"){
me.style.display="inline";
alert("文本现在是:'inline'.");
}
else {
if (me.style.display=="inline"){
me.style.display="none";
alert("文本现在是:'none'. 3秒钟后自动重新显示。");
window.setTimeout("blueText.style.display='block';",3000,"JavaScript");
}
else {
me.style.display="block";
alert("文本现在是:'block'.");
}
}
}
</script> <div>在<span id="blueText" onclick="toggleDisplay(this)"
style="color:blue;position:relative;cursor:hand;">蓝色</span>文字上点击来查看效果.</div>
在蓝色文字上点击来查看效果.
CSS属性中Display与Visibility的不同的更多相关文章
- CSS属性中display="none“与visibility="hidden"的不同
display="none",元素会从页面移除,不在页面占用位置,当某个元素设置为display="none"时,这个元素后面的元素会移动上来 visibili ...
- DIV中display和visibility属性差别
DIV中display和visibility属性差别 DIV中display和visibility属性差别还是挺大的,虽然Visibility和Display属性都可以达到隐藏页面元素的目的,但它们的 ...
- CSS属性中的display属性浅谈;
首先我们要知道什么是块级元素和行内元素有什么区别: 承接上篇文章:(浅谈HTML和body标签) 块级元素:浏览器解析为独占一行的元素(例如:div.table.ul等.),浏览器会在该元素的前后显示 ...
- CSS隐藏元素 display、visibility、opacity的区别
关于使指定元素无法在视野内看到,有3个方法 display: none; opacity: 0; visibility: hidden; 1.display: none; 该方法会改变页面布局. 元素 ...
- CSS属性中cursor:hand
在 IE 下设置鼠标为手型的方法: cursor: hand,但是在 FIREFOX 中是无效的,解决方法是在FIREFOX中设置: cursor: pointer. 而这个pointer 值在IE和 ...
- CSS属性(display)
1.display属性 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset= ...
- DIV CSS布局中position属性用法深入探究
本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态.这节课主要讲讲relative( ...
- 区别CSS中display:box;inline;none以及HTML中 <frame> 标签<table> 标签的 frame 属性
区别display:box:display:inline:display:none三者的不同 display:block的特点是: block是Display默认的值.总是在新行上开始:该对象随后的内 ...
- CSS 中 display:inline-block 属性使用详解
本文详细描述了display:inline-block的基础知识,产生的问题和解决方法以及其常见的应用场景,加深了对inline-block应用的进一步理解. 基础知识 display:inline- ...
随机推荐
- CentOS使用dnf安装Redis
1.查询可用的redis安装包 输入以下命令: dnf list redis 输出: redis.x86_64 3.2.10-2.el7 2.安装软件 输入以下命令: dnf install redi ...
- x86保护模式 任务状态段和控制门
x86保护模式 任务状态段和控制门 每个任务都有一个任务状态段TSS 用于保存任务的有关信息 在任务内权变和任务切换时 需要用到这些信息 任务内权变的转移和任务切换 一 ...
- 爆炸几何之 CCPC网络赛 I - The Designer (笛卡尔定理)
本文版权归BobHuang和博客园共有,不得转载.如想转载,请联系作者,并注明出处. Nowadays, little hahahaha got a problem from his teache ...
- HDU——1045Fire Net(最大匹配)
Fire Net Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total S ...
- [UOJ#219][BZOJ4650][Noi2016]优秀的拆分
[UOJ#219][BZOJ4650][Noi2016]优秀的拆分 试题描述 如果一个字符串可以被拆分为 AABBAABB 的形式,其中 A 和 B 是任意非空字符串,则我们称该字符串的这种拆分是优秀 ...
- [BZOJ1582] [Usaco2009 Hol]Holiday Painting 节日画画(线段树)
传送门 线段树区间修改傻题 #include <cstdio> #include <cstring> #include <iostream> #define N 5 ...
- KD-Tree 的笔记
声明: 蒟蒻对于 KD-Tree 的一点理解,写在博客里面作为笔记. 1.KD-Tree 的定义 1)关于 K-D KD-Tree 中的 D 即为 Dimension ,意思也就是维度. 所以 KD- ...
- 【邻接表+匈牙利算法模板】Elementary Math
http://acm.bnu.edu.cn/v3/external/gym/101485.pdf #include<bits/stdc++.h> using namespace std; ...
- angularjs bootstrap 简介
1.angular特色 数据双向绑定 模块化 var myapp=angular.module... 控制器 myapp.controller(){} 2.bootstrap特色 栅格结构 cs ...
- CodeForces 303B Rectangle Puzzle II
题意: 给定一个靠着坐标轴长为n,宽为m的矩形和 矩形中的一个点A,求在这个矩形内部一个 长宽比为a/b的小矩形,使这个小矩形的长宽尽量大使点A在小矩形内部,并且点A尽量靠近小矩形的中心 CF的思维题 ...