display和visibility的区别示例介绍
介绍 示例 区别 display visibility
2023-06-13 09:15:18 时间
display通常可以设置为none、inline、block
visibility通常可以设置为hidden、visible
当display为none，visibility为hidden时，元素都会不见。不过其还有不同之处。
display会将元素隐藏掉，并且位置不再被占据，而visibility则是占据原来的位置。
看例子即可明白：
复制代码代码如下:
visibility通常可以设置为hidden、visible
当display为none，visibility为hidden时，元素都会不见。不过其还有不同之处。
display会将元素隐藏掉，并且位置不再被占据，而visibility则是占据原来的位置。
看例子即可明白：
<divid="myDiv"style="width:100px;border:1pxsolid#aaa;">
<p>
</p>
</div>
<inputtype="button"onclick="isVisibility(document.getElementById("myDiv"))"value="是否可见visibility"/>
<inputtype="button"onclick="isDisplay(document.getElementById("myDiv"))"value="是否可见display"/>
<script>
functionisVisibility(me){
if(me.style.visibility=="hidden"){
me.style.visibility="visible";}
else{
me.style.visibility="hidden";
}
}
functionisDisplay(me){
if(me.style.display=="none"){
me.style.display="block";}
else{
me.style.display="none";
}
}
</script>
相关文章
- react源码解析-开篇介绍和面试题
- 汉字转拼音工具JPinyin的介绍和使用示例
- Hadoop2源码分析－YARN RPC 示例介绍详解大数据
- Spring aop实例介绍详解编程语言
- SqlServer扩展属性的介绍
- 关于Flyweight模式应用实践的相关介绍
- JS中prototype关键字的功能介绍及使用示例
- MySQL中select语句介绍及使用示例
- javascriptready和load事件的区别示例介绍
- AJAX实现鼠标经过弹出详细介绍示例
- setInterval()和setTimeout()的用法和区别示例介绍
- js阻止冒泡及jquery阻止事件冒泡示例介绍
- jQuery中delegate与on的用法与区别示例介绍
- document节点对象的获取方式示例介绍
- Document.location.href和.replace的区别示例介绍
- oracle表空间中空表统计方法示例介绍
- JavaScript中双叹号(!!)作用示例介绍
- ASP.NETmvc异常处理的方法示例介绍
- JavaScript中的异常捕捉介绍
- js创建对象的区别示例介绍
- PHP函数eval()介绍和使用示例
- $("").click与onclick的区别示例介绍