获取屏幕窗口的宽度和高度以及 div jquery 的高度

Question

用简单的英语来说，这就是我所追求的jQuery功能：

我需要获取浏览器窗口的宽度和高度，然后获取div .banner的高度（高度是自动的）。如果div 的高度高于浏览器窗口的高度.banner则附加.titlediv 并将div .social添加到正文中，否则.bannerdiv 中显示.titlediv 和 .socialdiv。

然后如何相应地设置两个div 的样式（.title 和 .social ）？

编辑：这是我的HTML页面加载代码：

<div class="banner">
   <div class="title">
      <!--to be positioned 40px from the left-->
   </div>
   <div class="social">
      <!--to be positioned 40px from the right-->
   </div>
   <img src="URL"/> <!-- Image determines height of DIV uses max-width -->
</div>

Answer 1

您可以执行以下操作：

var windowHeight = $(window).height(); //Gives you the browser viewport height
var bannerHeight = $(".banner").height();
if (bannerHeight > windowHeight) {
    $("body").append($('.title'));
    $("body").append($('.social'));
    //Then you can style them using jQuery .css
    //Example
    $('.title').css('color', 'red');
}
else {
    //Display .title and .social in your .banner div
}

• jQuery .height info： http://api.jquery.com/height/
• j查询.css信息： http://api.jquery.com/css/

Answer 2

使用以下函数：

$(window).height();
$(window).width();
$('.banner').width();
$('.banner').height();
$("#tostyle").addClass('someclass');

等

Answer 3

动态更新元素：

$(function(){
    var divheight = $('.banner').height(); // div current height
    // handle the resize event
    $(window).resize(function(){
        if($(this).height() < divheight) {
            $('.title').appendTo($('body'));
            $('.social').appendTo($('body'));
            $('.banner').hide();
        } else {
            $('.title').appendTo($('.banner'));
            $('.social').appendTo($('.banner'));
            $('.banner').show();
        }
    });
});

代码故意不简化以获得更好的可读性