网站地图 | Sitemap | Rss
  • 您当前位置:网站首页 >> 视觉设计 >> CSS隐藏DIV层和显示DIV层的控制方法
  • CSS隐藏DIV层和显示DIV层的控制方法

    来源:逍遥峡谷 发布时间:2012-11-15 浏览2条评论
    内容简介

    相关关键词:div   css   display   visibility   显示   隐藏  

    本文链接:http://www.icoa.cn/a/617.html

    CSS中的display和visibility属性

    css中display和visibility可以隐藏和显示html元素包括DIV层。看起来两者非常类似,很多人会搞混。下面分别介绍两者的属性:

    1.display:none|block;

    display:none;

    <div style="display:none;"></div>

    隐藏该html元素,确切的说,是在浏览器中消除该元素,不占屏幕的空间。若其下有其他元素,就会上移到该空间区域(好像桌子上有100块钱,现在我把它放在抽屉里藏起来,桌子上放100钱的地方可以放在其他任何东西)。

    dispaly:block;

    <div style="display:block;"></div>

    显示已经隐藏的html元素,如果别的元素占有了该空间时,占有这个空间的元素将下移,空间重新被原来隐藏的元素占有。(把100块钱重新从抽屉里那出来放回桌子上)。

    2.visibility:hidden|visible;

    visibility:hidden;

    <div style="visibility:hidden;"></div>

    隐藏该元素,真正的隐藏,但此元素还占有那块空间。(桌子上有100块钱,这时盖了块桌布把它隐藏起来,钱还在那里)。

    visibility:visible;

    <div style="visibility:visible;"></div>

    让元素显示(拿掉了桌布,看到了100块钱)。


    所以display和visibility控制的分别是html元素是否存在和是否显示,display的属性定义该元素存在或不存在,而visibility的属性只是控制该元素是否显示出来,实际上还是存在的。


    接下来用JS代码来举个例子测试一下,测试地址:测试CSS隐藏显示DIV层

    <html>
    <head>
    <script type="text/javascript">
    function testDisplay()
    {
        var divD = document.getElementById("testD");
        if(divD.style.display=="none")
        {
            divD.style.display = "block";
        }
        else
        {
            divD.style.display = "none";
        }
    }
        
    function testVisibility()
    {
        var divV = document.getElementById("testV");
        if(divV.style.visibility =="hidden")
        {
            divV.style.visibility = "visible";
        }
        else
        {
            divV.style.visibility = "hidden";
        }
    }
    </script>
    </head>
    </body>
    <div id="testD" style="border:#ddd 1px solid">
     Display
    </div>
    <div id="testV" style="border:#ddd 1px solid">
     Visibility
    </div>
    <input type="button" value="TestDisplay" onclick="testDisplay()"/>
    <input type="button" value="TestVisibility" onclick="testVisibility()"/>
    </body>
    </html>


    本文链接:http://www.icoa.cn/a/617.html
    关键词: div   css   display   visibility   显示   隐藏  

    为了网站的访问体验,本站无广告和弹窗
    如果您愿意支持,请扫码随意打赏、全凭自愿~


    上一篇:CSS控制大图片自动缩放的样式,支持IE6

    下一篇:正则表达式的规则


    - 相关文章 -


    模拟印鉴效果教程 - 2009-07-31

    PS配置文件丢失解决办法 - 2009-07-31

    关于PS的图层合并 - 2009-07-31

    用JS脚本判断浏览器的语言并自动转向 - 2009-07-31

    如何设置网站的PC版和移动版,以及两者之间的关系 - 2017-08-04

    电脑里出现Tempzxpsign文件夹的解决办法 - 2017-06-13

    今日全国哀悼日为舟曲灾区祈祷…将网站变成灰色CSS代码 - 2010-08-15

    淘宝天猫手机详情页应该如何设计 - 2017-04-06


    - 文章评论 -




    0063

    [由于政策原因,您的留言如果提交成功后,需要审核才能展示,请改天再来查看,请不要重复提交,谢谢支持!]

    - 最新评论[2条评论] -


    小强<2016-01-24 11:10:38>评论说:

    深度好文


    123<2015-07-24 11:32:40>评论说:

    这是纯CSS?瞎

    管理员回复: 这是用javascript来测试css样式是否生效的案例,不用js,这个css功能也是可以使用的。

    [>>>点击查看更多评论]

    逍遥峡谷 逍遥乱弹 张立博 爱之路 酷品优选 宝贝派

    版权所有©逍遥峡谷 - 智能中央超自然局·地球总部
    Copyright©Intelligence Central Occult Agency (I.C.O.A)
    本局纯属虚构,如有雷同,纯属巧合
    冀ICP备06033848号