认识身体的宽度和高度答案

【问题标题】：Recognize the body width and height认识身体的宽度和高度
【发布时间】：2011-11-10 21:53:08
【问题描述】：

我需要一个小脚本来执行此操作：

if(// window body Height is less then 660px) {
       // code to be executed if condition is true 
} 
else { 
      // code to be executed if condition is false 
}

希望有一个简单的解决方案！

编辑：

我现在有这个：

$(document).ready(function(){  
                       
if(parseInt($('body').height())<660){
    $("#container").addClass("small");
}
else{
    $("#container").removeClass("small");
}
 });

但它不起作用，有人知道我做错了什么吗？

【问题讨论】：

你是指视口高度（网页所在区域的高度）还是文档高度（网页的高度）？
虽然您可能没有意识到，但这是一条重要的信息。
@Jonathan 在这种情况下，我推荐$( 'html' ).height()。获取此值的非 jQuery 方法是 document.documentElement.offsetHeight.
还可以考虑运行此代码“onresize”（每当用户重新调整浏览器窗口的大小时）。
@Šime Vidas 也正好在调整大小！但是如何..？抱歉，它是视口，而不是文档高度..顺便检查一下我的编辑

标签： javascript jquery height resolution

【解决方案1】：

给你：

$( window ).resize(function () {
    $( container ).toggleClass( 'small', $( window ).height() < 660 );
}).triggerHandler( 'resize' );

其中container 是对您的#container 元素的引用。

.triggerHandler() 将手动触发 resize 事件（这反过来将执行上述 resize 处理程序），因此上述代码在 re-size 和页面加载时都有效。

【讨论】：

也不一定等于身高，但很可能是他想要的东西
@Andy 是的，正文/文档高度是不同的值，但我假设 OP 想要视口高度。
我喜欢它！这正是我需要的，谢谢！ :D 也感谢其他回复我的话题的人！

【解决方案2】：

只是想我会为后代指出这一点。在某些情况下，您可能需要 (body) 元素的整个高度，而不仅仅是 height 属性。使用.outerHeight(true) 得到它。

注意，打开 Firebug/Chrome 控制台。

body {
  padding: 10px;
  margin: 25px;
}

<p>This is a test</p>

console.log($('body').height());
console.log($('body').outerHeight(true));

这给了你：

20
90

http://jsfiddle.net/userdude/TS2Nn/

要解决这个问题，您可以使用html:

console.log('html: '+$('html').height());
console.log('html: '+$('html').outerHeight(true));
console.log('body: '+$('body').height());
console.log('body: '+$('body').outerHeight(true));

这会给你：

html: 90
html: 90
body: 20
body: 90

http://jsfiddle.net/userdude/TS2Nn/2/

【讨论】：

顺便说一句，如果 $('body') 被替换为 $('html')，则两种情况下的记录值都是 90。所以，如果有人对网页的高度感兴趣，$('html').height() 是我认为最方便的方法。
这是一个很好的观点，我明白为什么会这样。我把 (body) 留在了那里，以防有人因为其他原因遇到它（不仅仅是body），但在这种情况下寻找html 和使用一样有利可图.outerHeight(true)，据我所知。

【解决方案3】：

if(parseInt($('body').height())<660){

}else{

}

我认为 height() 和 width() 会返回整数，但可以肯定的是 parseInt 更好。

如果你不想使用 jquery

if(document.getElementsByTagName('body')[0].offsetHeight<660){

}else{

}

应该可以。

【讨论】：

他从来没有说过他使用jQuery...我不会-1，只是说。
@Cipi - 在他的标签里。安迪，你可能也想在高度上parseInt()。此外，显示.outerHeight(true) 的选项可能很有用。
哦，是的，抱歉...没有看到 jQuery 标签。
np。我通常只是检查 jquery 标签，所以我自动认为每个人都想要一个 jquery 解决方案。
@Andy - 这可能只是我的偏执狂，我总是尽量确保检查正确的类型。