javascript - いくつかの div の高さを計算して設定します (初期設定)。ブラウザウィンドウの高さを変更した場合 → divの高さを変更

Question

一部のdiv（初期設定）の高さを計算して設定する必要があります。ブラウザウィンドウの高さを変更する場合→divの高さを変更。

このコードをどのように書き直すのが良いでしょうか（初期設定を一度行い、ウィンドウのサイズ変更時に変更したい）：

$(document).ready(function () {
    var height = document.documentElement.clientHeight - 500;
    if (height < 135) {
        height = 135;
    }
    document.getElementById('left_space').style.height = height + 'px';

    $(window).resize(function () {
        var height = document.documentElement.clientHeight - 500;
        if (height < 135)
        {
            height = 135;
        }
        document.getElementById('left_space').style.height = height + 'px';
    });
});

Answer 1

それはあなたが探しているものですか？

api.jquery.com

jQuery(document).ready(function () {

$(window).resize(function() {
   var height = document.documentElement.clientHeight - 500;
    if (height < 135) {
        height = 135;
    }
    document.getElementById('left_space').style.height = height + 'px';

    jQuery(window).resize(function () {
        var height = document.documentElement.clientHeight - 500;
        if (height < 135)
        {
            height = 135;
        }
        document.getElementById('left_space').style.height = height + 'px';
    });

});


});

Answer 2

純粋にコードを整理する場合は、次のようになります。

$(document).ready(function () {

    var resizeIt = function() {
      var height = Math.max(document.documentElement.clientHeight - 500, 135);
      $('#left_space').css('height', height + 'px');
    };

    resizeIt();

    $(window).resize(function () {
        resizeIt();
    });
});

ここでは、高さを独自の関数に設定するコード行を取り出したので、コードが重複していません。次に、要素のスタイルを検索および変更するために jQuery で使用できる短い構文をいくつか利用しました。

Answer 3

jQuery(window).resize one がいいと思います