我无法获得正确的高度（）并获得宽度（）答案

【问题标题】：i cant get the correct height() and get width()我无法获得正确的高度（）并获得宽度（）
【发布时间】：2017-04-11 15:06:59
【问题描述】：

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

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

当用户第一次点击按钮时，他们会得到错误的值 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 函数解决问题。但我想正确地修复它。

【问题讨论】：

你能提供你目前拥有的html和javascript吗？或者至少是一个精简的可操作版本？
您好，感谢您的回复。我有js代码。我也更新了代码以包含 html。
能不能把设置"#hi"的宽高的代码放上去，如果用jQuery("#hi").width(600)设置就可以了。
我认为这是因为浏览器需要一点时间来实际更改 DOM。然后你太快地检查宽度和高度。这就是 setTimeout 解决问题的原因。它使 DOM 更新等待几毫秒。我认为唯一的其他“正确”方法可能是在元素调整大小时设置某种事件侦听器。不过不确定这是否可能。

标签： javascript jquery html height width

【解决方案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

如果您的元素的大小被正确更改，那么无论哪种方式，数字都应该相同。无需从元素中获取数字。

【讨论】：

这段代码根本不会改变“#hi”元素的大小。
@AliTahouri - 我知道，我只是以给出的示例并添加变量。这意味着该人已经知道如何更改大小。我没有添加该代码，因为我不确定他们使用什么方法更改大小。
@AliTahouri - 我意识到虽然我的回答并不完全清楚。我编辑了我的代码以更清楚地说明这一点。
对，那没关系。但是我最担心的是她尝试调整元素大小的方式，我认为问题从那里提出。

【解决方案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() 之前，您正在获取宽度和高度。

【讨论】：