获取DIV的jQuery的宽度和屏幕窗口的高度和高度(Get width and height of

用简单的英语，这是jQuery的功能后，我是：

我需要的宽度和浏览器窗口的高度，然后得到的高度.banner DIV（高度自动）。 如果高度.banner DIV比浏览器窗口的高度更高的追加.title股利和.social div来机构另有显示.title内的div和。社会DIV .banner DIV。

我怎么那么相应的（风格的两个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信息： http://api.jquery.com/height/
• jQuery的的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();
        }
    });
});

代码是故意不简化更好的可读性

文章来源: Get width and height of screen window and height of div jquery