divでページのサイズ変更が行われません。

Question

divがあります。ウィンドウサイズに基づいてjQueryのサイズを変更しようとしています。ウィンドウサイズの変更でサイズを変更するための私のコードはうまく動作しますが、何らかの理由でロード時に機能しません。数週間前に元のコードを書いていたので、私の心の中では新鮮ではありませんでしたが、問題を修正しました。何らかの理由で、今は動作していません。私はいくつかのことを変更しましたが、スクリプトそのものとは関係ありません。なぜ今働いていないのか分かりません。私が以前に思いついた解決策は、要素のサイズを変更する関数であったのと同じように、少し冗長に思えました。次に、ページのサイズを変更するための関数です。私はこれでかなり新しいので、おそらくそれは非常に基本的なものですが、私はそれを理解することはできません。私は最初の部分を$（window）.load（）関数に入れようとしましたが、ウィンドウ上のサイズ変更部分が動作しないようにするだけでした。

とにかく、ここでのコードは次のとおりです。

var width = $(window).width(); 
function resizeBig() { 
    $("#topbarMainBlockContainer").css("width", "calc(100% - 420px)"); 
} 
function resizeSmall() { 
    $("#topbarMainBlockContainer").css("width", "100%"); 
} 
if (width < 700) { 
    resizeSmall(); 
} else { 
resizeBig(); 
} 
$(window).resize(function() { 
    width = $(window).width(); 
    if (width < 700) { 
     resizeSmall(); 
    } else { 
     resizeBig(); 
    } 
}); 

ありがとう！

Answer 1

コードをドキュメントに添付して準備しましたか？

$(document).ready(function() { 
// code goes here 
}); 

または、本文の終了タグの前にスクリプトを読み込みます。

なぜなら、ページがまだ完全に読み込まれていないときにコードが実行されると、インタプリタは#topbarMainBlockContainerというIDを持つ要素を見つけられない可能性があるからです。