Wie OffsetHeight von div nach Änderung img src auf Kind mit reinem Javascript aktualisieren?

Question

Ich muss ein Bild in einem div ändern und dann sofort auf dem Bildschirm zentrieren, indem ich seine Höhe und Breite berechne und dann seine linken und oberen Werte festlege. Aber wenn ich den img src ändere und dann versuche, divs offsetHeight und clientHeight zu bekommen, sind beide Werte falsch. Seltsamerweise sind die Werte offsetWidth und clientWidth korrekt.

Gibt es eine Möglichkeit, das div zu aktualisieren und den richtigen Wert zu erhalten?

Bearbeiten: Es scheint, dass die Änderung der Bild-src macht alles danach nicht funktionieren. Die Änderung am onclick-Ereignis imageObj.onclick = function() {contractImageView(imageId);}; funktioniert jetzt auch nicht. Wenn ich die if-Anweisung auskommentiere, fängt alles wieder an zu arbeiten.

Unten ist der Code ...

// 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(); 

Edit: ich diese Arbeit am Ende bekam Antwort Joonas89 der Verwendung. Ich bewegte im Grunde die if Anweisung, die den src Wert zu einer anderen Funktion ändert, die vor der oben genannten aufgerufen wird. Dies löste das oben erwähnte Problem. Ich änderte dann die divs links/top von berechneten Werten zu 50%, wie von Joonas89 (aber auf dem Container-div und nicht img-Element), zusammen mit der neuen transform-Eigenschaft beschrieben. Das div und img hatten bereits einen Positionswert von fixed, also mussten wir das nicht ändern.

Answer 1

Sind Sie sicher, dass Sie die oberen und linken Positionen berechnen möchten? Es wäre besser, eine Klasse wie diese hinzuzufügen, die sie immer zentriert

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