display和visibility的区别示例介绍
display通常可以设置为none、inline、block
visibility通常可以设置为hidden、visible
当display为none,visibility为hidden时,元素都会不见。不过其还有不同之处。
display会将元素隐藏掉,并且位置不再被占据,而visibility则是占据原来的位置。
<div id="myDiv" style="width:100px;border:1px solid #aaa;">
<p>
</p>
</div>
<input type="button" onclick="isVisibility(document.getElementById('myDiv'))" value="是否可见visibility" />
<input type="button" onclick="isDisplay(document.getElementById('myDiv'))" value="是否可见display" />
<script>
function isVisibility(me){
if (me.style.visibility=="hidden"){
me.style.visibility="visible"; }
else{
me.style.visibility="hidden";
}
}
function isDisplay(me){
if (me.style.display=="none"){
me.style.display="block"; }
else{
me.style.display="none";
}
}
</script>
相关推荐
-
display和visibility的区别示例介绍
display通常可以设置为none.inline.block visibility通常可以设置为hidden.visible 当display为none,visibility为hidden时,元素都会不见.不过其还有不同之处. display会将元素隐藏掉,并且位置不再被占据,而visibility则是占据原来的位置. 看例子即可明白: 复制代码 代码如下: <div id="myDiv" style="width:100px;border:1px solid #aa
-
解决CSS中 display 与 visibility 的区别
大多数人很容易将CSS属性display和visibility混淆,它们看似没有什么不同,其实它们的差别却是很大的. visibility属性用来确定元素是显示还是隐藏的,这用visibility="visible|hidden"来表示(visible表示显示,hidden表示隐藏). 当visibility被设置为"hidden"的时候,元素虽然被隐藏了,但它仍然占据它原来所在的位置.例: function toggleVisibility(me){ if (me
-
$("").click与onclick的区别示例介绍
Html代码 <script type="text/javascript"> $(function(){ $("#btn4").click(function(){ $("#btn3").click(); }); }); function change(){ alert("onclick"); } </script> <button id="btn3" onclick="
-
jquery中子元素和后代元素的区别示例介绍
今天学习jQuery的选择器: jQuery选择器分为基本选择器.层次选择器.过滤选择器.表单选择器. 基本选择器:id,class,标签名,*,元素组合(div,span,p.myClass) 层次选择器: 难点: jquery中子元素和后代元素的区别 后代,就是当前元素的所有后代,都算, 子元素,就是当前元素的子集,再往下走就不算了. 具体的分析可以参考: 复制代码 代码如下: <div>This is <strong>very</strong> important
-
js类定义函数时用prototype与不用的区别示例介绍
一直在使用js编写自以为是面向对象的方法,遇到一个问题,就是定义一个方法,如下: 复制代码 代码如下: function ListCommon2(first,second,third) { this.First=function () { alert("first do"+first); } } ListCommon2.do1=function(first) { // this.First(); alert("first do"+first); } ListComm
-
JavaScript中变量声明有var和没var的区别示例介绍
本文来论述JavaScript中变量声明有var和没var的区别,关于Js中的变量声明的作用域是以函数为单位,所以我们经常见到避免全局变量污染的方法是 (function(){ // ... })(); 在函数内部,有var和没var声明的变量是不一样的.有var声明的是局部变量,没var的,声明的全局变量,所以可以借此向外暴露接口东东. 在全局作用域内声明变量时,有var 和没var看起来都一样,我们知道,声明的全局变量,就是window的属性,究竟是否一样,我们通过ECMAScrpit5提供
-
php中\r \r\n \t的区别示例介绍
\n 软回车: 在Windows 中表示换行且回到下一行的最开始位置.相当于Mac OS 里的 \r 的效果. 在Linux.unix 中只表示换行,但不会回到下一行的开始位置. \r 软空格: 在Linux.unix 中表示返回到当行的最开始位置. 在Mac OS 中表示换行且返回到下一行的最开始位置,相当于Windows 里的 \n 的效果. \t 跳格(移至下一列). 它们在双引号或定界符表示的字符串中有效,在单引号表示的字符串中无效. \r\n 一般一起用,用来表示键盘上的回车键,也可只
-
字符串长度函数strlen和mb_strlen的区别示例介绍
在php中常见的计算字符串长度的函数有:strlen和mb_strlen.当字符全是英文字符的时候,两者是一样.这里主要比较一下,中英文混排的时候,两个计算结果. 在PHP中,strlen与mb_strlen是求字符串长度的函数,但是对于一些初学者来说,如果不看手册,也许不太清楚其中的区别. 下面通过例子,讲解这两者之间的区别. 先看例子: <?php //测试时文件的编码方式要是UTF8 $str='中文a字1符'; echo strlen($str).'<br>';//14 echo
-
javascript中的undefined和not defined区别示例介绍
经研究发现,两者之间有很大的区别,不知从英语讲,这两者都有啥区别,研究结果如下 测试os:ubuntu 测试浏览器:chrome 测试案例1 console.log(a) 报错 ReferenceError: a is not defined 测试案例2 var a console.log(a) 无报错,但是输出undefined 测试案例2 var b = {}; console.log(b.a) 无报错,但是输出undefined 测试案例3 function c() { } var d =
-
jQuery学习之prop和attr的区别示例介绍
1..prop( propertyName ) 获取匹配集合中第一个元素的Property的值 2. .prop( propertyName, value ) .prop( map ) .prop( propertyName, function(index, oldPropertyValue) ) 给匹配元素集合设定一个或多个属性 .prop()和 .attr()区别 下面是关于jQuery1.6和1.6.1中Attributes模块变化的描述,以及.attr()方法和.prop()方法的首选使
随机推荐
- ORACLE出现错误1033和错误ORA-00600的解决方法
- Python性能优化技巧
- 可以显示单图片,多图片ajax请求的ThickBox3.1类下载
- ASP.NET通过分布式Session提升性能
- PHP入门教程之数组用法汇总(创建,删除,遍历,排序等)
- Windows下安装MySQL 5.7.17压缩版中遇到的坑
- Windows下MySQL 5.6安装及配置详细图解(大图版)
- MYSQL 修改root密码命令小结
- Android实现自定义圆形进度条
- Javascript公共脚本库系列(一): 弹出层脚本
- 不重新编译PHP为php增加openssl模块的方法
- Python文件与文件夹常见基本操作总结
- 利用PHP如何写APP接口详解
- 基于jQuery的图片不完全按比例自动缩小
- 解析VS2010利用VS.PHP插件调试PHP的方法
- Android编程基于Contacts读取联系人的方法(附demo源码)
- 新茶与陈茶之鉴别
- vue-music关于Player播放器组件详解
- Java PhantomJs完成html图片输出功能
- .NetCore利用BlockingCollection实现简易消息队列