Javascript show hide css/html/js問題

當我在html中調用showhide方法時，某些代碼無法正常工作。該方法顯示然後隱藏在此網頁上的一些HTML內容，但是，HTML或CSS不能正常工作。例如，當頁面被加載到瀏覽器中時，div將被顯示的空間只是空的空間，當根本沒有空格時，但是當div被顯示時它只是填充該空間。我認爲這可能與CSS有關，但我不確定。這是我用來顯示和隱藏的CSS ID。Javascript show hide css/html/js問題

#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的定位和隱藏內容也變得歪斜。

任何想法/幫助將不勝感激。

來源

2011-08-31 Dan

將visibility:hidden更改爲display:none以防止元件在隱藏時佔用空間。

您可能需要稍微改變你的JavaScript，但你有沒有張貼我不能肯定地說，但你會需要這樣的事：

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

來源

2011-08-31 06:58:29

在'none'和''（空字符串）之間切換，以便該元素在未隱藏時採用其默認或繼承的顯示屬性。 – RobG

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

visibility: hidden;儲備元空間

來源

2011-08-31 06:59:20 Samich

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

來源

2011-08-31 07:02:06 TROODON

PLIZ，請不要編輯我的評論。它的工作代碼。 – TROODON

http://webdesign.about.com/od/css/f/blfaqhidden.htm 報價網站建設：

「visibility：hidden的隱藏元素，但它仍然佔用空間佈局

顯示：無。儘管它的HTML仍然在源代碼中，但它並不佔用任何空間。「

來源

2011-08-31 07:17:31 jtsao22