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

简单来说，这就是我追求的jQueryfunction：

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

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

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

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/
• jQuery .css info： http ： //api.jquery.com/css/

Answer 2

使用这些function：

 $(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(); } }); }); 

故意不简化代码以提高可读性