0

平易な英語では、これは私が求めているjQuery機能です。

ブラウザウィンドウの幅と高さを取得してから、.bannerdivの高さを取得する必要があります（高さは自動です）。divの高.bannerさがブラウザウィンドウの高さよりも高い場合は、.titledivと.socialdivを本文に追加します。それ以外の場合は、.titledivと.socialdivをdiv内に表示します.banner。

次に、それに応じて2つの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>
4

3 に答える 3

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
}
于 2012-06-12T11:18:19.263 に答える
0

次の関数を使用します。

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

等

于 2012-06-12T11:07:59.897 に答える
0

要素を動的に更新します：

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

コードは、読みやすくするために意図的に単純化されていません

于 2012-06-12T11:34:32.267 に答える