正しい高さを得ることができず、幅を取得する

Question

ボタンをクリックしたときに呼び出される関数があります。

この関数は、まずコントロールのサイズを変更し、コントロールの高さと幅をフェッチして段落にテキストとして表示する2行のコードを持っています。

ユーザーが最初のボタンをクリックすると、彼らは340 * 150の間違った値を取得し、彼らはもう一度ボタンをクリックしたとき、彼らは600 *

340 * 150 400ある古い/オリジナルの正しい値を取得しますコントロールが拡大する前のサイズ。

しかし、間違った値が表示されても最初のクリックでは、600 * 400の正しい制御サイズが表示されます。

function a() { 
//change control to 600*400 
//now get the height and width and display in 'p' and 'g'. 
document.getElementById('p').innerHTML = jQuery("#hi").width(); 
document.getElementById('g').innerHTML = jQuery("#hi").height(); 
} 

<button id="btn" onClick="a()"> Maximize 600x400 </button 

また、settimeout関数を使用すると問題が解決されます。しかし、私はそれを正しく修正したい。

Answer 1

このようなことはできますか？

function a() { 
    var w = 600; 
    var h = 400; 
    // change control to 600*400 using the w and h variables 
    // code to do that here ...  

    // now get the height and width and display in 'p' and 'g'. 
    document.getElementById('p').innerHTML = w; 
    document.getElementById('g').innerHTML = h; 
} 

<button id="btn" onClick="a()"> Maximize 600x400 </button 

エレメントのサイズが適切に変更されている場合、数字はどちらの場合も同じにする必要があります。要素から数値を取得する必要はありません。

Answer 2

ページロード時にイベントを作成すると、btnResizeと表示され、サイズ変更後にイベントを発生させると問題が解決されます。 jQueryはtrigger()を使用してイベントを発行します。

function a(){ 
 
    $('#hi').width(600); 
 
    $('#hi').height(400); 
 
    $('#hi').trigger('btnResize'); 
 
} 
 

 
$('#hi').on('btnResize', function(){ 
 
    $('#p').html($('#hi').width()); 
 
    $('#g').html($('#hi').height()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<button id="btn" onClick="a()"> Maximize 600x400 </button> 
 
<div id="p"></div> 
 
<div id="g"></div> 
 
<br> 
 
<button id="hi" style="width:340px; height:150px;" > resize me </button>

私はあなたの問題ではJavaScriptの非同期性と同じくらい簡単だったと思います。関数a()が呼び出される前に、幅と高さを取得していました。