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 中:

.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;为元素预留空间