Question

我在html中调用showhide方法时的某些代码无法正常工作。该方法显示在该网页上隐藏了一些html内容，但是，html或css无法正常运行。例如，当页面在浏览器中加载时，显示div的空间只是空白空间，当根本不应该有空格时，但是当显示div时它只填充该空间。我认为这可能与css有关，但我不确定。这是我用来显示和隐藏的CSS ID。

#showAndHide {
    text-align: justify;
    height: auto;
    width: 700px;
    margin: auto;
    position: relative;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 10px;
    visibility: hidden;
}

以下是这个应用的html的一小部分示例。

<div id="showAndHide">
   <div id="physicalAdress">                        
     <div class="h4">
       <h4> What is your physical address? </h4>
     </div> 

     <p> Property name (if you have one) </p>
     <input type="text" name="propertyName" /><br/>

html在showandhide div中，然后在用户输入div中：

.userinput {
    text-align: justify;
    height: auto;
    width: 700px;
    margin: auto;
    position: relative;
    border-collapse: collapse;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 10px;
    border-right-style: solid;
    border-left-style: solid;
}

这是Javascript方法。

function showHideDiv()
{
    var divstyle = new String();
    divstyle = document.getElementById("showAndHide").style.visibility;

    if(document.getElementById("yesPrint").checked == true) 
    {
       document.getElementById("showAndHide").style.visibility = "visible";
    }
    if(document.getElementById("noPrint").checked == true) 
    {
        document.getElementById("showAndHide").style.visibility = "hidden";
    }   
 }

基本上当我运行页面并显示内容时样式变得歪斜，并且不显示和隐藏内容的html的位置也变得偏斜。

任何想法/帮助将不胜感激。

Answer 1

使用display:none代替visibility: hidden;。

visibility: hidden;为元素预留空间

Answer 2

将visibility:hidden更改为display:none，以防止元素在隐藏时占用空间。

您可能需要略微更改您的JavaScript，但由于您尚未发布，我无法肯定地说，但您需要这样的内容：

element.style.display = "block"; //Show the element

Answer 3

function toggle_show(id) {
    var el = document.getElementById(id);
    if (el && el.style) {
        el.style.display = el.style.display == 'none' ? 'block' : 'none';
    }
}

Answer 4

http://webdesign.about.com/od/css/f/blfaqhidden.htm 引用网页设计：

“visibility：hidden隐藏了元素，但它仍然占用了布局中的空间。

display：none从文档中完全删除元素。它不会占用任何空间，即使它的HTML仍然在源代码中。“

Javascript show hide css / html / js问题

4 个答案: