js中 visibility和display的区别 js中 visibility和display的区别

  1. 大多数人很容易将CSS属性display和visibility混淆,它们看似没有什么不同,其实它们的差别却是很大的。
  2. visibility属性用来确定元素是显示还是隐藏,这用visibility="visible|hidden"来表示,visible表示显示,hidden表示隐藏。当visibility被设置为"hidden"的时候,元素虽然被隐藏了,但它仍然占据它原来所在的位置。例:
  3. <script language="JavaScript">
  4. function toggleVisibility(me){
  5. if (me.style.visibility=="hidden"){
  6. me.style.visibility="visible";
  7. }
  8. else {
  9. me.style.visibility="hidden";
  10. }
  11. }
  12. </script>
  13. <div onclick="toggleVisibility(this)" style="position:relative">
  14. 第一行文本将会触发"hidden"和"visible"属性,注意第二行的变化。</div><div>因为visibility会保留元素的位置,所以第二行不会移动.</div>
  15. 效果:
  16. 第一行文本将会触发"hidden"和"visible"属性,注意第二行的变化。
  17. 因为visibility会保留元素的位置,所以第二行不会移动.
  18. 注意到,当元素被隐藏之后,就不能再接收到其它事件了,所以在第一段代码中,当其被设为"hidden"的 时候,就不能再接收响应到事件了,因此也就无法通过鼠标点击第一段文本令其显示出来。另一方面,display属性就有一点不同了。visibility 属性是隐藏元素但保持元素的浮动位置,而display实际上是设置元素的浮动特征。当display被设置为block(块)时,容器中所有的元素将会 被当作一个单独的块,就像<div>元素一样,它会在那个点被放入到页面中。(实际上你可以设置<span>的 display:block,使其可以像<div>一样工作。将display设置为inline,将使其行为和元素inline一样--- 即使它是普通的块元素如<div>,它也将会被组合成像<span>那样的输出流。最后是display被设置:none,这时 元素实际上就从页面中被移走,它下面所在的元素就会被自动跟上填充。下面看我实例的代码和效果:
  19. 例:
  20. <script language="JavaScript">
  21. function toggleDisplay(me){
  22. if (me.style.display=="block"){
  23. me.style.display="inline";
  24. alert("文本现在是:‘inline‘.");
  25. }
  26. else {
  27. if (me.style.display=="inline"){
  28. me.style.display="none";
  29. alert("文本现在是:‘none‘. 3秒钟后自动重新显示。");
  30. window.setTimeout("blueText.style.display=‘block‘;",3000,"JavaScript");
  31. }
  32. else {
  33. me.style.display="block";
  34. alert("文本现在是:‘block‘.");
  35. }
  36. }
  37. }
  38. </script>
  39. <div>在<span id="blueText" onclick="toggleDisplay(this)"
  40. style="color:blue;position:relative;cursor:hand;">蓝色</span>文字上点击来查看效果.</div>
  41. 效果:
  42. 在蓝色文字上点击来查看效果.
时间: 2024-10-14 18:54:15

js中 visibility和display的区别 js中 visibility和display的区别的相关文章

JQuery之JQuery的版本 JQuery入门 属性获取 JQuery就绪函数 JS文档就绪函数和JQuery文档就绪函数的区别 JS对象和JQuery对象的区别 关于$的使用 多个JS库的冲突解决方案

JQuery的版本 JQuery入门 属性获取 JQuery就绪函数 JS文档就绪函数和JQuery文档就绪函数的区别 JS对象和JQuery对象的区别 关于$的使用 多个JS库的冲突解决方案 JQuery的版本 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery的版本</title> <

display:none opacity:0以及visibility:hidden的区别

相同作用 能够对元素进行隐藏 1.空间占据 display: none;不占据空间,所以动态改变此属性时会引起重排. visibility: hidden元素会被隐藏,但是不会消失,依然占据空间. opacity=0只是透明度为100%,元素隐藏,依然占据空间. 2.继承性 display:none不会被子元素继承,但是父元素都不在了,子元素自然也就不会显示了,皮之不存,毛之安附~~ visibility:hidden 会被子元素继承,可以通过设置子元素visibility:visible 使子

区别CSS中display:box;inline;none以及HTML中 &lt;frame&gt; 标签&lt;table&gt; 标签的 frame 属性

区别display:box:display:inline:display:none三者的不同 display:block的特点是: block是Display默认的值.总是在新行上开始:该对象随后的内容自动换行;行高以及顶和底边距都可控制:宽度缺省是它的容器的100%,除非设定一个宽度:<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子,意思是他们默认显示方式是block: display:inl

CSS控制XML与通过js解析xml然后通过html显示xml中的数据

使用CSS控制XML的显示 book.css bookname{ display:block;color:Red} author{ display:block;font-style:italic} price{ display:block;colo book.xml <?xml version="1.0" encoding="GB2312" ?> <?xml-stylesheet type="text/css" href=&qu

ie中placeholder属性不支持,js解决

ie中placeholder属性不支持,js的解决方法: //placeholder属性在ie下兼容 function placeholder ( pEle , con ) { var pEle = pEle if( pEle.find("input,textarea").val() == "" ){ pEle.append("<i class='placeholder_ie'>"+con+"</i>"

Vue.js学习笔记:在元素 和 template 中使用 v-if 指令

f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <script src="https://cdn.bootcss.com/vue/2.2.

JSP中如何利用JS实现登录页面的跳转(JSP中如何利用JS实现跳转页面)

JSP中如何利用JS实现登录页面的跳转(JSP中如何利用JS实现跳转页面) 注:只是用到js中的setTimeout();具体使用方法:  setTimeout(函数名, 时间(毫秒)); setTimeout( ) 是属于 window 的 method, 但我们都是略去 window 这顶层物件名称, 这是用来设定一个时间, 时间到了, 就会执行一个指定的 method.setTimeout( ) 通常是与 function一起用. 样例: 1 <%@ page language="j

JS中的模块化开发之Sea.JS

模块化开发的好处: 1:减少冲突 2:提高性能 用sea.js为例:sea.js模块库下载地址:http://seajs.org/docs/#downloads 例子:获取非行间样式的模块化开发: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="

Js实现select联动,option从数据库中读取

待要实现的功能:页面有两个select下拉列表,从第一个select中选择后,在第二个select中出现对应的列表选择,再从第二个select中选择后,在一个text中显示对应的信息.两个select和text的数据全部来自oracle数据库,该功能用js实现. 首先我们先定义两个select和text: <select id="department" style="width: 80px" onChange="selectChange(this.v