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

【问题标题】：Get width and height of screen window and height of div jquery获取屏幕窗口的宽度和高度以及div jquery的高度
【发布时间】：2012-06-15 06:12:03
【问题描述】：

简而言之，这是我所追求的 jQuery 功能：

我需要获取浏览器窗口的宽度和高度，然后获取.banner div 的高度（高度是自动的）。如果.banner div 的高度高于浏览器窗口的高度，则将.title div 和.social div 附加到body 中，否则在.banner div 内显示.title div 和.social 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>

【问题讨论】：

简单的英语，你试过什么？
你试过$(window).height()、$(window).width()、$('.banner').height()等吗？
好吧，我已经编辑了帖子以包含我的 HTML 代码，但我尝试根据分辨率生成 if 语句，但不够健壮，因为我必须复制所有 div。我只是不知道如何编写 jQuery 来让某些东西工作......
作为参考，这是我使用的一些代码，但效率不够：stackoverflow.com/questions/9617762/…

标签： jquery html browser append browser-width

【解决方案1】：

动态更新元素：

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

为了更好的可读性，故意不简化代码

【讨论】：

【解决方案2】：

您可以执行以下操作：

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/

【讨论】：

这太棒了。很有魅力。我会接受您的回答，但只是想知道，如何更新浏览器调整大小的代码？这样当浏览器在桌面上调整大小（例如更小）时，脚本会刷新并相应地调整自身？
您只需要使用 jQuery .resize() 创建一个事件监听器。示例可以在这里找到：api.jquery.com/resize
干杯马克。无法通过使用以下代码包装您的代码来使其工作： $(window).resize(function() { ... your code here ... });当谈到 jQuery 时，我是个新手。如果我能得到这个工作会很好，但我知道这不是我最初的问题的一部分:)
.resize 的哪一部分不起作用？调整窗口大小时是否调用过 .resize 函数？还是附加等不起作用？
您提供的附加代码不适用于它。不确定如何测试 .resize 函数是否被调用。

【解决方案3】：

使用这些函数：

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

等

【讨论】：

太好了，但我对编写 jQuery 代码毫无用处，那么如何将其转换为工作代码 sn-p？