Question

我有一个单击按钮时调用的函数。

该函数首先改变控件的大小，然后我有两行代码来获取控件的高度和宽度，并在段落中将它们显示为文本。

当用户首次点击按钮时，他们将获得错误的340 * 150值，当他们再次点击该按钮时，他们会得到正确的值600 * 400

340 * 150是控件扩展前的旧/原始大小。

然而，即使显示错误的值，第一次点击时仍然可以显示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()发出一个事件。

＆＃13;

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

＆＃13;

<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>

＆＃13;

我相信您的问题就像JavaScript的异步特性一样简单。在调用函数a()之前，您获得了宽度和高度。

我不能得到正确的身高（）并获得宽度（）

2 个答案: