Question

我在$(document).ready(function(){ /*code*/ });中包含了一些代码，除了一行外，所有代码都正常工作。它上面的代码工作正常，它下面的代码工作正常，我的控制台没有任何错误。

$('.main-right.category').height( $('.footer').height() + $('.main-right.category').height() );

那不会开火。但是，如果我将其完全粘贴到开发人员控制台中并在页面加载后按Enter键，则可以正常工作。页面加载时存在所有元素（意味着没有通过javascript动态构建）。在chrome，firefox，IE中也有相同的结果。

有什么想法吗？

编辑：我应该添加我的css在我的javascript之前加载，并且我已经在同样的javascript文件中完成了其他CSS相关的调整，这些调整工作正常。

另外，如果我在该行代码正上方的console.log $（'。main-right.category'）。height（）和$（'。footer'）。height（），它们都给出非零值像我期望的整数值。

Answer 1

当DOM准备好使用时，就会触发就绪事件。它与加载事件不同，当所有资产（css，javascript，images，...）都被加载时，它会触发。

我想当你编码运行时，你试图获得高度的元素确实已经计算了高度，所以似乎没有任何反应。

当您在控制台中执行代码时，所有内容都会被加载，因此行为就是预期的行为。

要绑定到load事件，请检查方法.load()。

Answer 2

$（document）.ready在DOM结构完全可用时触发，此时渲染通常没有完成，因此元素的维度可能是未知的，而height（）将返回错误的值。

请改用 $(window).load() 。

Answer 3

我通常设置身高：

var height = $('.footer').height() + $('.main-right.category').height();
$('.main-right.category').css('height',height+'px');

Answer 4

您应该使用console调试选择器并查看元素的高度;

$(document).ready(function() {

  var $footer = $('.footer');
  var $category = ('.main-right.category');

  console.log($category, $footer);
  console.log($category.height(), $footer.height());
  console.log('New height =', ($category.height() + $footer.height()));

});

代码不会在$（document）.ready中执行，但会在开发人员控制台中执行

4 个答案: