javascript-在调整大小时检测div高度

2019-12-10 14:36:27 阅读：263 来源： 互联网

标签：resize css html javascript jquery

我正在尝试检测将内容加载到的div的高度.此div没有指定的高度,因为我正在向其中加载页面,它们本身以不同的数量填充div.我认为我使用的代码无法正常工作.

#content div在加载文档时获得正确的高度,但是单击加载事件时我无法获得该高度.

的HTML：

<div id="select">
<div id="menu">
    <ul>
    <li><a class="load" href="javascript:void(0)" id="p1">P1</a></li>
    <li><a class="load" href="javascript:void(0)" id="p2">P2</a></li>
    </ul>
</div>
<div id="spacer"></div>
<div id="content"></div>

CSS：

#content {
    left: 227px;
    top: 20px;
    width: 703px;
    padding: 0 0 100px 0;
    position: absolute;
}

#spacer {
    border-right: 2px solid #000000;
    left: 10px;
    position: absolute;
    top: 710px;
    width: 215px;
}

我的jQuery：

$(document).ready(function() {
    //Load Initial Content
    $("#content").html('<ul><li>Loading Content...</li></ul>')
        .load("/content/" + "projects.php", null, function() {
            contentHeight = $("#content").height();
            selectHeight = $("#select").height();

            $("#content").height(contentHeight);
            $("#select").height(selectHeight);
            $("#spacer").height((contentHeight - selectHeight - 40) + "px")
                        .css({"top": selectHeight + 40 + "px" });
            });

    //Load content on click function
    $(".load").click(function(){
        loadName = $(this).attr("id");
        $("#content").html('<ul><li>Loading Content...</li></ul>')
                     .load("/content/" + loadName + ".php", null, function(){
                         contentHeight = $("#content").height();
                         selectHeight = $("#select").height();

                         $("#spacer").height(0);

                         if(selectHeight > contentHeight) {
                         $("#spacer").css({"display": "none"}); 
                         }else{

                         $("#spacer").css({"top": selectHeight + 40 + "px", "display": "block" })
                                     .height((contentHeight - selectHeight - 40) + "px");
                         return false;
                         }
                         });
    });
});

我正在加载中的萤火虫中得到这个：

<div id="select" style="height: 689px;"/>
<div id="spacer" style="height: 5461px; top: 729px;"/>
<div id="content" style="height: 6190px;"/>

现在,如果我点击说P2,即使div内的实际内容只有625px高,其内容高度的div仍保持不变.因此它不会被切换.

解决方法:

除非JQuery非常聪明(而且它很聪明,但我认为它不那么聪明),否则您不会收到resize事件,因为Firefox(可能还有Safari)仅支持window对象上的resize事件. IE确实支持DIV等元素的resize事件.

因此,您需要一种不同的方法：

$(document).ready(function()
{
  $("#content").html('<ul><li>Loading Content...</li></ul>')
              .load("/content/" + "projects.php", null, function()
              {
                window.setTimeout(content_loaded, 0);
              });

  function content_loaded()
  { 
    $("#content").css({"height": $("#content").height() + "px"}); 
  }

  $("#spacer").css({"height": $("#content").height() + "px"});

  $(".load").click(function()
  {
    loadName = $(this).attr("id");

    $("#content").html('<ul><li>Loading Content...</li></ul>')
                 .load("/content/" + loadName + ".php", null, function()
                 {
                   window.setTimeout(content_loaded, 0); });
                 });

    $("#spacer").css({"height": $("#content").height + "px"});
  });
});

注意我在这里使用setTimeout方法,因为当内容更改时,IE在整理宽度和高度参数时经常滞后.通过使用setTimeout,它可以使IE在访问height和width属性之前对它们进行排序.您可以选择删除它,并将content_loaded作为回调参数直接传递给load方法.

标签：resize,css,html,javascript,jquery
来源： https://codeday.me/bug/20191210/2102079.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript-在调整大小时检测div高度