visibility, opacity,dispay 几个显示或者隐藏元素的区别

1. visibility: 规定元素是否可见

　　可能的取值： inherit:规定元素从父级元素继承 visibility 属性的值

　　　　　　 visibile：默认值，元素是可见的；

　　　　　　　　hidden：元素是不可见的【即使元素的 visibility 值为 hidden，也会占据页面上的空间】

<html>
<head>
<style type="text/css">
h1.visible {visibility:hidden}
h1.invisible {visibility:visible}
</style>
</head>

<body>
<h1 class="invisible">这是不可见的标题</h1>
<h1 class="visible">这是可见的标题</h1>
</body>
</html>

效果：

时间： 2024-07-29 13:17:21

visibility, opacity,dispay 几个显示或者隐藏元素的区别的相关文章

页面滚动显示或隐藏元素Headroom.js插件帮助你实现滚动效果

Headroom.js 是什么? Headroom.js 是一个轻量级.高性能的JS小工具(不依赖任何工具库!),它能在页面滚动时做出响应.此页面顶部的导航条就是一个鲜活的案例,当页面向下滚动时,导航条消失,当页面向上滚动时,导航条就出现了. Headroom.js 有什么用? 固定页头(导航条)可以方便用户在各个页面之间切换.但是这也会带来些问题…本文原创博客地址:http://www.cnblogs.com/unofficial官网地址:www.pushself.com) 大屏幕一般都是宽度

【jQuery/CSS】显示或隐藏元素

1. CSS分别有display.visibility两个样式可以用于隐藏或显示HTML元素 1) display样式有多个类型的值可选择,默认值为inline,隐藏后会释放元素所占用的页面空间(详见:点击打开链接) style="display: none;" document.getElementById("div1").style.display="none";//隐藏 document.getElementById("div1&

JS 实现显示和隐藏div（以百度地图为例）

主要参考的文章:https://my.oschina.net/xsh1208/blog/215811,https://zhidao.baidu.com/question/568774688.html 隐藏和显示div的方式有两种: 方式1:隐藏后仍占有页面空间,显示空白div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白.style="visibility: none;"document.getElementById("typediv1")

JavaScript - 元素的显示和隐藏

元素的显示和隐藏 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>元素的显示和隐藏</title> <style type="text/css"> img{ display:block; } </style> <script type="text/

html元素的显示和隐藏

div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白: style="visibility: hidden;" document.getElementById("typediv1").style.visibility="hidden";//隐藏 document.getElementById("typediv1").style.visibility="visible";//显示通

认识CSS中高级技巧之元素的显示与隐藏

前端之HTML,CSS(八) CSS高级技巧元素的显示与隐藏 CSS中有三个属性可以设置元素的显示于隐藏,分别是:display.visibility和overflow. display 隐藏元素:display:none: 显示元素:display:block:(两层含义:1.显示模式转换为块级元素显示:2.显示元素) display属性缺省默认属性值为:block或者inline,至于选择哪一个交给HTML元素确定,块级元素如<div>.<p>等默认显示为block,行内元素

15jQuery学习笔记-----动画----层的显示和隐藏

show().hide()方法会显示.隐藏元素.用toggle()方法在显示.隐藏之间切换 $(":button[value=show]").click(function() { $("div").show(); }); $(":button[value=hide]").click(function() { $("div").hide();}); 如果show.hide方法不带参数则是立即显示.立即隐藏,如果指定速度参数则会

jQuery获取display为none的隐藏元素的宽度和高度的解决方案

1.利用给元素添加行内样式:visibility:hidden;display:block 2.让隐藏元素变成有物理尺寸存在,但不可见,获取元素宽高 3.再给它还原成display为none,去除visibility //#step-2默认是隐藏 display:none //添加样式,物理可见 $("#step-2").css({"display":"block","visibility":"hidden"

display,opacity,visibility,position隐藏元素的实质

(1)display:设置属性display:none:,该元素被隐藏,而且该元素的子孙后代也被同时隐藏,此时被隐藏的元素不占据任何空间,用户的交互操作在此元素上不能生效,但是通过js语句操作dom可以来操作该隐藏元素. 实例: .display-hide { display: none; transition: all ease 0.8s; } .display-hide:hover { /* 当鼠标悬浮在该元素时,设置为block,此时元素也不会出现 ,因为被display隐藏的元素