$(window).height()的值和元素宽度在加载和文档就绪时都是错误的

Wrong value of $(window).height() and element width onload and on document ready

本文关键字：文档 就绪 加载 错误 height window 元素      更新时间：2023-09-26

我正在尝试使用jQuery来居中我的页面内容。一切工作完美后调整大小，但它不工作在所有使用$(窗口)。加载和$(document).ready

下面是我的代码: 
    <script>
        $(window).load(function() {
        if ($('.container-fix').outerWidth() > 768) {
            var a = ($(window).width() - $('.container-fix').outerWidth()) / 2;
                alert($('.container-fix').outerHeight());
                alert($(window).height());
                $('.container-fix').css({
                    position: 'absolute',
                    left: ($(window).width() - $('.container-fix').outerWidth()) / 2,
                    top: ($(window).height() - $('.container-fix').outerHeight()) / 2
                });
            } else {
                $('.container-fix').removeAttr('style');
            }
            $('.dziekujemy-bg').css({
                height: $('iframe').outerHeight() + 6
            })
    });
    </script>
    <script>
    function resizeWidth() {
        var existingWidth = $(document).data('resize-width');
        var newWidth = $(document).width();
        if (existingWidth != newWidth) {
            if ($('.container-fix').outerWidth() > 768) {
                $('.container-fix').css({
                    position: 'absolute',
                    left: ($(window).width() - $('.container-fix').outerWidth()) / 2,
                    top: ($(window).height() - $('.container-fix').outerHeight()) / 2
                });
            } else {
                $('.container-fix').removeAttr('style');
            }
            $('.dziekujemy-bg').css({
                height: $('iframe').outerHeight() + 6
            })
            $(document).data('resize-width', newWidth);
        };
    };
    $(window).resize(resizeWidth);
    </script>

第二个脚本工作完美，我创建的第一个脚本只是试图在初始页面加载时执行代码。

编辑-答案更改8/27/2015

在不透明之前的某个时刻将容器div设置为display:inline-block。所以，如果你不打算淡入，设置它的样式或类强制inline-block 

<div id="container" class="container-fix" style="display:inline-block;">

或者，默认情况下使用display:none隐藏div，并在文档的ready或窗口的load事件处理程序的末尾使用jQuery.fadeIn之类的东西。

<div id="container" class="container-fix" style="display:none;">

…

$(document).ready(function() {
    ...
    $('.container-fix').fadeIn(500);
});

关于之前的答案

我用一段代码回答了这个问题，但不是因为我指出的原因。我说漏了一个分号是罪魁祸首。谢谢你斜眼指出我的错误。

在JS中不是错误。没有理由添加分号就能使代码正常工作。——斜视

我同意在语句末尾省略分号不是js错误。话虽如此，我仍然相信这不是一个语法错误的情况，但由于js最终被解释的上下文导致了解析错误。我花了一些时间说服自己这不是问题，现在我完全同意你的观点。我真的有点尴尬，我把这个作为答案扔在那里，让它被接受。

那么为什么我的样本像预期的那样工作?

后来我想到，当我添加$().fadeIn()时，我实际上以一种不重要的方式修改了代码。我相信发生的事情是你有一个块级元素，默认的CSS display值为block。通过使用$('.container-fix').fadeIn()，所选元素的样式从默认的block更改为inline-block。我在示例中明确指定了style=display:none，覆盖了block的默认值。因此，直到它的显示从none更改为inline-block，您才真正看到div。

已标记为接受的初始(错误)答案

我把这个留在这里仅供参考

首先修复js错误，你所拥有的将会工作。该块后面缺少分号…

$('.dziekujemy-bg').css({
    height: $('iframe').outerHeight() + 6
}) // <--- add semi-colon

这是一个精简的版本，取自你发布的链接的源代码，添加了一点过渡，这样你就不会在计算中心后看到页面加载的div跳转。

<!doctype html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
  <title>Title</title>
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/custom.css">
  <link rel="stylesheet" href="css/style-testimonials.css">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/modernizr.min.js"></script>
  <script defer="" src="http://nasfactor.com/themes/dotsquare/html/html/js/jquery.flexslider-min.js"></script>
  <title>Do zobaczenia w niedzielę 30.08.2015 o 17:00</title>
  <!-- Tutaj tytuł strony -->
  <!-- Facebook Conversion Code for Rejestracja -->
  <img height="1" width="1" alt="" style="display:none" src="https://www.facebook.com/tr?ev=6025672695760&amp;cd[value]=0.01&amp;cd[currency]=THB&amp;noscript=1" />
</head>
<body>
  <div id='divLoading'>Loading...</div>
  <div id="container" class="container-fix" style="display:none;">
    <article class="span7">
      <section>
        <div class="embed-container embed-frame">
          <iframe src='http://www.youtube.com/embed/bWA6h-F-jho' frameborder='0' allowfullscreen></iframe>
        </div>
      </section>
    </article>
    <aside class="span5 col">
      <div class="dziekujemy-bg">
        <div class="position-fix">
          <p>Do zobaczenia na webinarze! Ustaw sobie przypomnienie w telefonie na niedzielę o 16:00 (webinar startuje o 17:00)!</p>
          <p>Chcę przygotować ten webinar specjalnie dla Ciebie - dlatego proszę wypełnij krótką ankietę - a poruszę na webinarze sprawy ważne dla Ciebie:</p>
          <p><a href="#">ANKIETA - KLIKNIJ</a>
          </p>
          <p style="margin-bottom:0">Dziękuję bardzo!</p>
        </div>
      </div>
    </aside>
  </div>

  <script>
    $(document).ready(function() {
      if ($('.container-fix').outerWidth() > 768) {
        var a = ($(window).width() - $('.container-fix').outerWidth()) / 2;
        // alert($('.container-fix').outerHeight());
        // alert($(window).height());
        $('.container-fix').css({
          position: 'absolute',
          left: ($(window).width() - $('.container-fix').outerWidth()) / 2,
          top: ($(window).height() - $('.container-fix').outerHeight()) / 2
        });
      } else {
        $('.container-fix').removeAttr('style');
      }
      $('.dziekujemy-bg').css({
        height: $('iframe').outerHeight() + 6
      });
      $('div#container').fadeIn(500);
      $('div#divLoading').fadeOut(500);
    });
  </script>
  <script>
    function resizeWidth() {
      var existingWidth = $(document).data('resize-width');
      var newWidth = $(document).width();
      if ((existingWidth != newWidth) || $(document).ready) {
        if ($('.container-fix').outerWidth() > 768) {
          $('.container-fix').css({
            position: 'absolute',
            left: ($(window).width() - $('.container-fix').outerWidth()) / 2,
            top: ($(window).height() - $('.container-fix').outerHeight()) / 2
          });
        } else {
          $('.container-fix').removeAttr('style');
        }
        $('.dziekujemy-bg').css({
          height: $('iframe').outerHeight() + 6
        });
        $(document).data('resize-width', newWidth);
      };
    };
    $(window).resize(resizeWidth);
  </script>
</body>
</html>
相关文章：