Chrome Resize事件和getComputedStyle

Question

我在調整大小事件和getComputedStyle方法時遇到問題。 當我將窗口的尺寸從例如700px調整為800+ px時，我的元素的高度從79px更改為default（10px）。 但是，當我想通過getComputedStyle獲得此值（10px）或在devtools中對其進行檢查時，將輸出如下內容：76、63、59，最后是10px。 因此，devtools中的height值是在下一個調整大小事件而不是在第一次調整大小時更新的，並且每個調整大小事件之間都有一些中間值。 所以我的問題是，如何獲得最終價值？ 我嘗試使用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

請為您的dom提供您的CSS，我敢打賭您有一些過渡