根據條件減少字體大小，為什么我的遞歸 function 不起作用？

Question

我在父<div>容器中有一個<p>元素。 父容器的大小是根據視口的width和height來確定的。 在窗口調整大小時，我想減小<p>的字體大小，直到<p>元素的高度小於視口高度的 40%，這意味着文本將很好地適合父容器。

我下面的function怎么了？

我收到的錯誤是“超出最大調用堆棧大小”。 我知道那一定是因為基本情況沒有評估為真。 但是我不明白為什么不。

我已經運行了這些不同的測試來嘗試調試但沒有成功：

• 通過我的 fontSize 變量調整字體大小是否有效：是
• 調整字體大小是否影響<p>元素的高度：是
• 我可以多次調整字體大小並在控制台中看到減小的<p>元素大小嗎：是的

function：

<script>
    const pElement = document.getElementById('actualAboutTxt');
    const style = window.getComputedStyle(pElement, null).getPropertyValue('font-size');
    var fontSize = parseFloat(style);

    function decrementFont () {
        if(pElement.scrollHeight <= (window.innerHeight * 0.4)) {
            // do nothing
        } else {
            pElement.style.fontSize = (fontSize - 1) + "px";
            decrementFont();
        };
    };

    addEventListener("load", () => {
        decrementFont();
    });

    addEventListener("resize", () => {
        decrementFont();
    });
</script>

編輯 1：更新 HTML 和 CSS（匿名一些網址）：

<section id="mainSection">
        <div class="backBtnDiv">
            <button id="backToFilter" onclick="window.location.href='<link to my url>';">&#8634 back to filter</button>
        </div> 
        <video id="background-video" autoplay loop muted poster="<link to my poster img>">
            <source src="<link to my video>">
        </video>
        <div id="aboutText">
            <h1>Practice makes perfect</h1>
            <p id="actualAboutTxt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ultrices enim id leo commodo, ac commodo dolor laoreet. Quisque eget facilisis dui. Ut sit amet dui ultrices, ultrices eros ut, auctor purus. Nulla bibendum velit in rhoncus rutrum.<br><br>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ultrices enim id leo commodo, ac commodo dolor laoreet. Quisque eget facilisis dui. Ut sit amet dui ultrices, ultrices eros ut, auctor purus. Nulla bibendum velit in rhoncus rutrum.<br><br>  
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ultrices enim id leo commodo, ac commodo dolor laoreet. Quisque eget facilisis dui. Ut sit amet dui ultrices, ultrices eros ut, auctor purus. Nulla bibendum velit in rhoncus rutrum.</p>
            <button id="firstBtn" onclick="window.location.href='<link to myurl';">Start practicing</button>
        </div>
</section>

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Archivo', arial; 
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#mainSection {
    position : relative;
    width: 100vw;
    height: 90vh;
    overflow: hidden;
}

.backBtnDiv {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    position: absolute;
    top: 0;
    display: flex;
    justify-content: center;
}

#backToFilter {
    background: transparent;
    border: none;
    font-size: 12px;
    color: white;
}

#backToFilter:hover {
    cursor: pointer;
}

#aboutText {
    position: absolute;
    left: 5%;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.5);
    height: 60%;
    width: 40%;
    border-radius: 10px;
}

h1 {
    margin-top: 5%;
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 5%;
}

#actualAboutTxt {
    margin-bottom: 5%;
    margin-left: 5%;
    margin-right: 5%;
    font-size: 15px;
}

#firstBtn {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    height: 7.5vh;
    width: 75%;
    border-radius: 5px;
    border-color: transparent;
    background-color: rgb(77, 5, 232);
    color: white;
    font-size: 17px;
    font-weight: bold;
}

#firstBtn:hover {
    cursor: pointer;
    background-color: #9bc969;
}

#background-video {
    object-fit: cover;
    object-position: center;
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    z-index: -1;
}
@media only screen and (max-width: 1000px) {
#aboutText {
    left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
    height: 80%;
    width: 80%;
    border-radius: 5px;
    }
}

編輯 2：一種可行的解決方案：

使用雙遞歸 function 將<p>元素保持在兩個vh值之間。 如果元素太高則減小字體，如果元素不夠高則增加字體。

代碼：

<script>
    const pElement = document.getElementById('actualAboutTxt');
    const style = window.getComputedStyle(pElement, null).getPropertyValue('font-size');
    var fontSize = parseFloat(style);

    function decrementFont () {
        if(pElement.scrollHeight > (window.innerHeight * 0.30) && pElement.scrollHeight < (window.innerHeight * 0.42)) {
            return;
        } else if (pElement.scrollHeight > (window.innerHeight * 0.42)) {
            pElement.style.fontSize = (--fontSize) + "px";
            decrementFont();
        } else if (pElement.scrollHeight < (window.innerHeight * 0.35)) {
            pElement.style.fontSize = (++fontSize) + "px";
            decrementFont();
        };
    };

    addEventListener("load", () => {
        decrementFont();
    });

    addEventListener("resize", () => {
        decrementFont();
    });
</script>

Answer 1

此片段是 OP 要求的非遞歸解決方案的示例。 沒有HTML（目前），所以不行。

此外，代碼可能永遠不會滿足條件，因此循環可能永遠運行下去。

將遞歸用於非遞歸任務並不理想。 當您在此處使用遞歸時，您正在創建一個不必要的堆棧。

 const pElement = document.getElementById('actualAboutTxt'); const style = window.getComputedStyle(pElement, null).getPropertyValue('font-size'); var fontSize = parseFloat(style); function decrementFont() { let fontOK = false; do { if (pElement.scrollHeight > (window.innerHeight * 0.30) && pElement.scrollHeight < (window.innerHeight * 0.42)) { fontOK = true; } else if (pElement.scrollHeight > (window.innerHeight * 0.42)) { pElement.style.fontSize = (--fontSize) + "px"; } else if (pElement.scrollHeight < (window.innerHeight * 0.35)) { pElement.style.fontSize = (++fontSize) + "px"; } } while(;fontOK), } addEventListener("load"; () => { decrementFont(); }), addEventListener("resize"; () => { decrementFont(); });

Answer 2

據我了解，這是一個問題。

if(pElement.scrollHeight <= (window.innerHeight * 0.4)) {
            // do nothing
        } 

所以如果高度將小於或等於你想要的任何東西那么這個遞歸應該結束是嗎？ 這是一個遞歸點，如果你不寫 break； 它會繼續，所以你應該寫一個 break，而不是寫 // do nothing comment； 試試這個，看看它是否有效。