サイズ変更関数を適用するとdivの実行時の寸法を取得する方法は？

Question

divにresize関数が適用されています。 divのサイズを変更してページを更新すると、同じ古いディメンションが保持されます。 私が必要とするのは、リフレッシュ後もサイズ変更された値を保持する必要があります。 これを達成するためのアイデアはありますか？このため

$(function() { 
 
    $("#box").resizable(); 
 
    $('#main').draggable(); 
 
    $("#button").click(function() { 
 
    if ($(this).html() == "-") { 
 
     $(this).html("+"); 
 
    } else { 
 
     $(this).html("-"); 
 
    } 
 
    $("#box").slideToggle(); 
 
    }); 
 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 

 

 
<div class="main" id="main"> 
 
    <div id="title_bar"> 
 
    <div id="button">-</div> 
 
    </div> 
 
    <div id="box"> 
 
    <marquee direction="right"> 
 
     <h4>Hi user</h4> 
 
    </marquee> 
 
    </div> 
 
</div>

Answer 1

使用のsessionStorage。また、異なるセッション間でこれを保持したい場合は、localStorageを使用します。以下のコードとFiddle Demo

Updated Fiddle

$(function() { 
 
    var wid = window.sessionStorage.getItem("boxWidth"); 
 
    var hit = window.sessionStorage.getItem("boxHeight"); 
 
    if (typeof wid != 'undefined' && typeof hit != 'undefined') { 
 
    $('#box').css('width', parseInt(wid)); 
 
    $('#box').css('height', parseInt(hit)); 
 
    } 
 
    $("#box").resizable(); 
 
    $("#box").on("resize", function() { 
 
    sessionStorage.setItem("boxWidth", $("#box").css('width')) 
 
    sessionStorage.setItem("boxHeight", $("#box").css('height')) 
 
    }) 
 
    $('#main').draggable(); 
 
    $("#button").click(function() { 
 
    if ($(this).html() == "-") { 
 
     $(this).html("+"); 
 
    } else { 
 
     $(this).html("-"); 
 
    } 
 
    $("#box").slideToggle(); 
 
    }); 
 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 

 

 
<div class="main" id="main"> 
 
    <div id="title_bar"> 
 
    <div id="button">-</div> 
 
    </div> 
 
    <div id="box"> 
 
    <marquee direction="right"> 
 
     <h4>Hi user</h4> 
 
    </marquee> 
 
    </div> 
 
</div>

希望は、これはあなたが以前に設定値を保存し、それを設定するには、Javaスクリプトでセッションを使用することができます:)