Javascript $（window）.height（）和元素宽度的值错误，在加载和文档准备就绪时

我正在尝试使用jQuery将页面内容居中。调整大小后，一切都能正常工作，但是使用$（window.load）和$（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>

$（窗口）。加载（函数（）{
如果（$（'.container fix'）.outerWidth（）>768）{
var a=（$（window.width（）-$（'.container-fix'）.outerWidth（））/2；
警报（$（'.container fix'）.outerHeight（））；
警报（$（窗口）.height（））；
$（'.container fix'）.css({
位置：'绝对'，
左：（$（窗口）.width（）-$（'.container fix'）.outerWidth（））/2，
顶部：（$（窗口）.height（）-$（'.container fix'）.outerHeight（））/2
});
}否则{
$（'.container fix'）.removeAttr（'style'）；
}
$（'.dziekujemy bg'）.css({
高度：$（“iframe”）.outerHeight（）+6
})
});
函数resizeWidth（）{
var existingWidth=$（document）.data（'resize-width'）；
var newWidth=$（document）.width（）；
如果（现有宽度！=新宽度）{
如果（$（'.container fix'）.outerWidth（）>768）{
$（'.container fix'）.css({
位置：'绝对'，
左：（$（窗口）.width（）-$（'.container fix'）.outerWidth（））/2，
顶部：（$（窗口）.height（）-$（'.container fix'）.outerHeight（））/2
});
}否则{
$（'.container fix'）.removeAttr（'style'）；
}
$（'.dziekujemy bg'）.css({
高度：$（“iframe”）.outerHeight（）+6
})
$（文档）.data（'resize-width'，newWidth）；
};
};
$（窗口）。调整大小（调整宽度）；

第二个脚本工作得很好，我创建的第一个脚本只是为了在初始页面加载时尝试执行代码。

Edit-Answer changed 8/27/2015 使容器div

在不透明之前的某个点显示：inline block

。因此，如果您不想淡入，请将其样式或类设置为force

inline block

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

关于先前的答复 我用一段有效的代码回答了这个问题，但不是因为我指出的原因。我说是缺少分号造成的。谢谢你指出我的错误

---

这不是JS中的错误。没有理由添加分号会使代码正常工作斜视

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

那么，为什么我的样品能像预期的那样工作呢

后来我想到，当我添加

$（）.fadeIn（）

时，我实际上以一种非无关紧要的方式修改了代码。我相信现在的情况是，您有一个块级元素，其默认CSS

display

值为

block

。通过使用

$（'.container fix'）.fadeIn（）

所选元素的样式将从默认的

块更改为
内联块。在我的示例中，我明确指定了
style=display:none
，覆盖了
block
的默认值。因此，直到div的显示从
none
更改为
inline block
，您才真正看到它


已标记为已接受的初始（错误）答案
我把这个留在这里仅供参考

首先修复js错误，您所拥有的将起作用。这个街区后分号不见了

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

$（'.dziekujemy bg'）.css({
高度：$（“iframe”）.outerHeight（）+6
}) // 
加载。。。

Dziękujębardzo
$（文档）.ready（函数（）{
如果（$（'.container fix'）.outerWidth（）>768）{
var a=（$（window.width（）-$（'.container-fix'）.outerWidth（））/2；
//警报（$（'.container fix'）.outerHeight（））；
//警报（$（窗口）.height（））；
$（'.container fix'）.css({
位置：'绝对'，
左：（$（窗口）.width（）-$（'.container fix'）.outerWidth（））/2，
顶部：（$（窗口）.height（）-$（'.container fix'）.outerHeight（））/2
});
}否则{
$（'.container fix'）.removeAttr（'style'）；
}
$（'.dziekujemy bg'）.css({
高度：$（“iframe”）.outerHeight（）+6
});
$（'div#container'）.fadeIn（500）；
$（'div#divLoading'）。淡出（500）；
});
函数resizeWidth（）{
var existingWidth=$（document）.data（'resize-width'）；
var newWidth=$（document）.width（）；
if（（existingWidth！=newWidth）| |$（document）.ready）{
如果（$（'.container fix'）.outerWidth（）>768）{
$（'.container fix'）.css({
位置：'绝对'，
左：（$（窗口）.width（）-$（'.container fix'）.outerWidth（））/2，
顶部：（$（窗口）.height（）-$（'.container fix'）.outerHeight（））/2
});
}否则{
$（'.container fix'）.removeAttr（'style'）；
}
$（'.dziekujemy bg'）.css({
高度：$（“iframe”）.outerHeight（）+6
});
$（文档）.data（'resize-width'，newWidth）；
};
};
$（窗口）。调整大小（调整宽度）；
这在JS中不是错误。没有理由添加分号会使代码正常工作。
$(document).ready(function() {
    ...
    $('.container-fix').fadeIn(500);
});

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

<!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>