Javascript 更改 div 的大小(如果为空或不为空)

Question

我希望一个 div 在有内容时始终具有高度 59% 并在空白时消失。

更多解释在这张照片中:

我使用 javascript 来做，尝试了很多方法但没有任何反应。这是我的代码:

<%--Html--%>

    <div id="main">
            <div id="content1">
             </div>
            <div id="down"> 
            </div>
        </div>

<%--CSS: in css file--%>
    #main
    {width:84%;height:78%;position:absolute;left:8%; top:14%; }
    #content1
    {width: 100%;height: 59%;overflow: auto;}
    #down
    {margin-top:0.5%;width: 100%;height: 40%;}

<script type="text/javascript">
    if ($("#content1").length < 1) {
                    $("#content1").height = 0%;
                    $("#down").height = 100%;
                    }
    else {   
    $("#content1").height = 59%;
        $("#down").height =40%;
    }
</script>

Answer 1

我注意到有几个问题...首先，您的 javascript 应该在文档完成加载后调用 - 为此，您需要将它放在一个

$(document).ready(function(){ ... });

其次，我会使用 jquery 进行赋值，例如 .css({...}) 函数。

同样值得一提的是条件语句

if ($("#content1").length < 1) 

正在检查“#content1”包含的元素数量，如果您想检查该元素中 html 字符串的长度，您可以使用 .html()。

把所有的东西放在一起，这就是最终的结果应该是这样的

    $(document).ready(function(){
         if ($("#content1").length < 1) {
              $("#content1").css('height', '0%');
              $("#down").css('height', '100%');
         }
         else {   
              $("#content1").css('height', '59%');
              $("#down").css('height', '40%');
         }
    });

以这种方式使用 jquery 的 css 函数将用设置的样式覆盖现有样式。现在这个脚本只会在 DOM 首次加载后被调用一次 - 所以只要你页面上的内容没有改变，一切都应该正常运行

享受