Chrome Resize event and getComputedStyle

Question

I have problem with resize event and getComputedStyle method. When I resize window from eg 700px to 800+ px height of my element is changing from 79px to default(10px). But when i want get this value(10px) by getComputedStyle or check it in devtools there is output something like this: 76, 63, 59, and finally 10px. So height value in devtools is updated on next resize event, not on first, and there are some intermediates values between each resize event. So my question is, how I can get the final value? I try resizing with the setTimeout method, but this also doesn't work as I expected. My code looks something this:

window.addEventListener("DOMContentLoaded", function(){
    if(window.matchMedia("(min-width:800px)").matches){
        default();  
    }
    else{
        changeHeight();
    }
    window.addEventListener('resize',onResizeFunction);


})
function default(){
    slot.parentElement.style.height=''
    console.log(slot.parentElement.style.height) 
    console.log(getComputedStyle(slot.parentElement).height)  //problem with this line, when called in resize event it's output something like this: 76,63,59 and then 10px;

}

function changeHeight(){
    slot.parentElement.style.height="79px";
    console.log(slot.parentElement.style.height)  //this is ok

}

function onResizeFunction(){

    if(window.matchMedia("(min-width:800px)").matches){
        default();
    }
    else{
        changeHeight();
    }

}

And I can't use CSS, because I'm working on an old project and it's only possible to use JS to get this work

Answer 1

请为您的dom提供您的CSS，我敢打赌您有一些过渡