Javascript顯示隱藏css / html / js問題

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中，該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，但是由於您尚未發布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引用網頁設計：

“可見性：隱藏隱藏元素，但是它仍然占據布局中的空間。

顯示：無將元素從文檔中完全刪除。 即使它的HTML仍在源代碼中，它也不會占用任何空間。”