Chrome事件与getComputedStyle

Question

我在调整大小事件和getComputedStyle方法方面有问题。当我将窗口从g 700 px调整为800+时，元素的px高度将从79 px更改为默认值(10 Px)。但是，当我想通过getComputedStyle获得这个值(10 or )或在devtools中检查它时，会输出如下的内容: 76、63、59，最后是10 or。因此devtools中的高度值是在下一个调整大小事件上更新的，而不是在第一个事件上更新的，并且在每个调整大小事件之间都有一些中间值。所以我的问题是，我怎样才能得到最终的价值？我尝试使用setTimeout方法调整大小，但这也不像我预期的那样工作。我的代码看起来是这样的：

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

}

我不能使用CSS，因为我正在处理一个旧的项目，只有使用JS才能完成这项工作

Answer 1

请提供您的css给您的位置，我打赌您有一些过渡