认识身体的宽度和高度

发布于 2024-12-03 08:11:47 字数 524 浏览 0 评论 0原文

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

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");
}
 });

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

原文

I need a little script which allows me to do this:

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 
}

Hope there is a simple solution for that!

EDIT:

I have this now:

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

But it's not working, anybody knows what I'm doing wrong?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

合约呢 2024-12-10 08:11:47

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

}else{

}

我认为 height() 和 width() 会返回整数，但为了确定性，更好的 parseInt 。

如果你不想使用 jquery

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

}else{

}

应该可以。

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

}else{

}

i thought height() and width() will return integers but yea better parseInt for certainty.

if you don't want to use jquery

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

}else{

}

should work.

回复收藏 0 原文

暮年慕年 2024-12-10 08:11:47

就是这样：

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

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

.triggerHandler() 将手动触发调整大小事件（该事件反过来将执行上面的调整大小处理程序），因此上面的代码在调整大小和页面加载时都有效。

Here you go:

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

where container is a reference to your #container element.

.triggerHandler() will manually fire the resize event (which in turn will execute the above resize handler), so the above code works both on re-size and on page load.

回复收藏 0 原文

吃颗糖壮壮胆 2024-12-10 08:11:47

只是想我会为后代指出这一点。在某些情况下，您可能需要 (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/

Just thought I would point this out for posterity. There may be some cases where you want the entire height of the (body) element, not just the height property. Use .outerHeight(true) to get that.

Note, have Firebug/Chrome Console open.

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

<p>This is a test</p>

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

Which gives you:

20
90

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

To get around this, you could use html:

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

Which will give you: