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()方法的首选使
随机推荐
- 中文Access2000速成教程--1.4 使用“表向导”建立新表
- 使用Webpack提高Vue.js应用的方式汇总(四种)
- 浅谈Java 对于继承的初级理解
- 关于获取DIV内部内容报错的原因分析及解决办法
- php中异常处理方法小结
- python sqlobject(mysql)中文乱码解决方法
- android里面屏蔽home键/禁止Home键或者随你DIY
- JS区分Object与Aarry的六种方法总结
- 浅谈Python 对象内存占用
- 当文本框的值发生改变时,触发事件,在IE中有效
- SQL Server误区30日谈 第17天 有关页校验和的误区
- jQuery页面刷新(局部、全部)问题分析
- 模拟Mybatis的实现方法
- 怎么批量删除log目录下的日志?
- C语言冒泡排序法心得
- php自定义函数截取汉字长度
- 在php中取得image按钮传递的name值
- 麦酷数据为您提供205M-500M免费全能型空间服务
- JAVA程序员不得不留意的编码规范
- 利用Python进行数据可视化常见的9种方法!超实用!