使用純JavaScript在子級上更改img src后如何刷新div的offsetHeight？

Question

我需要在div中更改圖像，然后通過計算其高度和寬度，然后設置其左側和頂部值，將其立即在屏幕上居中。 但是，當我更改img src並嘗試獲取div的offsetHeight和clientHeight時，兩個值都是錯誤的。 奇怪的是，offsetWidth和clientWidth值是正確的。

有沒有辦法刷新div並獲取正確的值？

編輯：似乎更改圖像src會使之后的所有內容無法正常工作。 對onclick事件的更改imageObj.onclick = function() {contractImageView(imageId);}; 現在也不工作。 如果我注釋掉if語句，那么所有這些都將再次開始工作。

下面是代碼...

   // Get the page dimensions
   var pageBody = document.getElementById(currentBody);
   // If you couldn't get the page body, abort.
   if (!pageBody) {
      return;
   }

   var pageBodyHeight = window.innerHeight;
   var pageBodyWidth = pageBody.offsetWidth;
   var imageDiv = document.getElementById(imageId);
   var imageObj = imageDiv.children[0];
   var paraObj = imageDiv.children[1];
   // If you can't get the div or its image, then abort.
   if (!imageDiv || !imageObj) {
      return;
   }
   // Check whether the image has been loaded yet, and load if needed
   if (imageObj.src.indexOf('lazy_placeholder.gif') !== -1) {
      for (item in photoLazyData) {
         if (item === imageDiv.parentElement.id) {
            imageObj.src = photoLazyData[item][imageDiv.id];
         }
      }
   }
   // Change the images class.
   imageDiv.className = 'active_design_div';
   imageDiv.style.visibility = 'visible';
   imageDiv.style.opacity = 1;
   // Set the objects new onclick method to collapse the image
   imageObj.onclick = function() {contractImageView(imageId);};
   // Calculate the right size
   imageDiv.style.maxHeight = pageBodyHeight + 'px';
   imageDiv.style.maxWidth = pageBodyWidth  + 'px';
   imageObj.style.maxHeight = pageBodyHeight + 'px';
   imageObj.style.maxWidth = pageBodyWidth  + 'px';
   // Calculate the margins.
   var imageDivWidth = imageDiv.offsetWidth || imageDiv.clientWidth;
   // ## THIS IS WRONG IF THE ABOVE IF STATEMENT CHANGES THE SRC ##
   var imageDivHeight = imageDiv.offsetHeight || imageDiv.clientHeight; 
   console.log(imageDiv.offsetHeight + ' : ' + imageDiv.clientHeight);
   console.log(imageDiv.offsetWidth + ' : ' + imageDiv.clientWidth);
   var leftOffset = (pageBodyWidth - imageDivWidth) / 2;
   var topOffset = (pageBodyHeight - imageDivHeight) /2;
   // Adjust styling to make the div visible and centred.
   imageDiv.style.left = String(leftOffset) + 'px';
   imageDiv.style.top = String(topOffset) + 'px';

   currentId = imageId;
   toggleBlackDiv();

編輯：我最終使用Joonas89的答案來完成這項工作。 我基本上將if語句移動了if它將src值更改為另一個函數，該函數在上述函數之前被調用。 這解決了上面提到的onclick問題。 然后，我將左/頂部的div從計算值更改為Joonas89詳細介紹的50% （但在容器div而不是img元素上）以及新的transform屬性。 div和img的位置值已經固定，因此不需要更改。

Answer 1

您確定要計算頂部和左側位置嗎？ 最好添加一個這樣的類，使其始終居中

.parentDiv{
   position: relative;
 }
.imageElement{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
 }