zoukankan      html  css  js  c++  java
  • style="visibility: hidden"和 style=“display:none”之间的区别

    style=“display:none” 隐藏页面元素:

    <html>
    <head>
    <script type="text/javascript">
    function removeElement()
    {
    document.getElementById("p1").style.display="none";
    }
    </script>
    </head>
    <body>
    
    <h1>Hello</h1>
    
    <p id="p1">This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.</p>
    
    <input type="button" onclick="removeElement()"
    value="Do not display paragraph" />
    
    </body>
    </html>

    当visibility被设置为"hidden"的时候,元素虽然被隐藏了,但它仍然占据它原来所在的位置。

    通过以下代码,比较两者之间的差异:

    <h1>display 属性分别为block, inline, none 值及使用visibility: hidden;的情况调试</h1> 
    
    <P><SPAN id="oSpan" style="background-color: #CFCFCF;">This is a SPAN</SPAN> in a sentence.</P> 
    
    <P> 
    
        <input type=button value="Inline" onclick="oSpan.style.display='inline'"> 
    
        <input type=button value="Block" onclick="oSpan.style.display='block'"> 
    
        <input type=button value="None" onclick="oSpan.style.display='none'"> 
    
        <input type=button value="Hidden" onclick="oSpan.style.visibility='hidden'">
    
        <input type=button value="Visible" onclick="oSpan.style.visibility='visible'"> 
    
    </P>
  • 相关阅读:
    java 抽象类
    ClassNotFoundException: dao.impl.ActionImpl
    侦听状态一直为T的处理
    Duplicate entry '1' for key 'PRIMARY'(报错)
    ibatis学习笔记
    java中的堆、栈和常量池
    servlet学习
    三大排序
    第一次面试??交流
    毕业季,学长,学姐们的践行
  • 原文地址:https://www.cnblogs.com/mr-wuxiansheng/p/7554550.html
Copyright © 2011-2022 走看看