scrollwidth 和 clientwidth 保持不变，同时增加字体大小

问题描述 投票：0回答：1

我有这个函数可以根据滚动宽度增加容器的字体大小。但是当我在 while 循环中打印scrollWidth 和 clientWidth 时，它保持不变。

function adjustFontSize(textField) {
      let fontSize = 10; // Starting font size
      textField.style.fontSize = fontSize + "px";
      // Increment font size until textField no longer fits
      while (textField.scrollWidth <= textField.clientWidth) {
        fontSize++;
        textField.style.fontSize = fontSize + "px";
      }
    }

这是我的html。我正在尝试调整playerInfoContainer（playerInfo类）的直接子级的大小。

<div id="playerInfoContainer">
        <div class="playerInfo winner">
          <div class="playerInfoName">Sané</div>
          <div class="playerInfoPercentage">9 (40,9%)</div>
        </div>
        <div class="playerInfo">
          <div class="playerInfoName">Hamm</div>
          <div class="playerInfoPercentage">8 (36,4%)</div>
        </div>

        <div class="playerInfo">
          <div class="playerInfoName">Gulászci</div>
          <div class="playerInfoPercentage">5 (22,7%)</div>
        </div>
      </div>

这是CSS。父容器是一个弹性盒，但即使我将其更改为网格也没有帮助。

#playerInfoContainer {
      position: absolute;
      top: 172px;
      left: 0;
      width: 267px;
      height: 599px;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
    }

.playerInfo {
      width: 200px;
    }

.playerInfoName {
      font-family: UberEatsFat;
    }

    .playerInfoPercentage {
      font-size: 25px;
      font-family: UberEatsRegular;
    }

我尝试将children的flex-basis设置为0px并将flex-shrink设置为0，以便宽度保持不变。 当我在 devTools 中查看时，超过 clientWidth 的容器的滚动宽度实际上更大，因此我在执行代码时只会得到错误的读数。

这是 MRE：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #playerInfoContainer {
      position: absolute;
      top: 172px;
      left: 0;
      width: 267px;
      height: 599px;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
    }

    .playerInfo {
      
      width: 200px;
    }

    .playerInfo.winner {
      color: red;
    }

    .playerInfoName {
      font-family: UberEatsFat;
    }

    .playerInfoPercentage {
      font-size: 25px;
      font-family: UberEatsRegular;
    }
</style>
<body>
    <div id="playerInfoContainer">
        <div class="playerInfo winner">
          <div class="playerInfoName">Sané</div>
          <div class="playerInfoPercentage">9 (40,9%)</div>
        </div>
        <div class="playerInfo">
          <div class="playerInfoName">Hamm</div>
          <div class="playerInfoPercentage">8 (36,4%)</div>
        </div>

        <div class="playerInfo">
          <div class="playerInfoName">Gulászci</div>
          <div class="playerInfoPercentage">5 (22,7%)</div>
        </div>
    
</body>
<script>
     const playerInfoContainer = document.getElementById("playerInfoContainer");
     const playerInfoContainerChildren = playerInfoContainer.children;
     Array.from(playerInfoContainerChildren).forEach((child) => {
      console.log("child: ", child);
      adjustFontSize(child);
    });
    function adjustFontSize(textField) {
      let fontSize = 10; // Starting font size
      textField.style.fontSize = fontSize + "px";
      // Increment font size until textField no longer fits
      console.log("textfield: ", textField);
      console.log("scrollWidth: ", textField.scrollWidth);
      console.log("clientWidth: ", textField.clientWidth);
      while (textField.scrollWidth <= textField.clientWidth && fontSize < 30) {
        console.log("scrollWidth: ", textField.scrollWidth);
        console.log("clientWidth: ", textField.clientWidth);
        // console.log(`adjust font size: ${fontSize}`);
        fontSize++;
        textField.style.fontSize = fontSize + "px";
      }
      console.log("scrollWidth: ", textField.scrollWidth);
      console.log("clientWidth: ", textField.clientWidth);
      // Step back one size
      textField.style.fontSize = fontSize - 6 + "px";
    }
</script>
</html>

javascript html css
1个回答
0
投票

我仔细检查了你的代码，发现了一个逻辑上的小问题。您在 while 循环中更新了字体大小，但它并没有立即反映 scrollWidth 和 clientWidth 的新值，因为 DOM 布局尚未更新。

要解决此问题，您可以使用 requstAnimationFrame 进行更新。

我提供更新的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #playerInfoContainer {
        position: absolute;
        top: 172px;
        left: 0;
        width: 267px;
        height: 599px;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
    }

    .playerInfo {
        width: 200px;
    }

    .playerInfo.winner {
        color: red;
    }

    .playerInfoName {
        font-family: UberEatsFat;
    }

    .playerInfoPercentage {
        font-size: 25px;
        font-family: UberEatsRegular;
    }
</style>
<body>
    <div id="playerInfoContainer">
        <div class="playerInfo winner">
            <div class="playerInfoName">Sané</div>
            <div class="playerInfoPercentage">9 (40,9%)</div>
        </div>
        <div class="playerInfo">
            <div class="playerInfoName">Hamm</div>
            <div class="playerInfoPercentage">8 (36,4%)</div>
        </div>

        <div class="playerInfo">
            <div class="playerInfoName">Gulászci</div>
            <div class="playerInfoPercentage">5 (22,7%)</div>
        </div>
</body>
<script>
     const playerInfoContainer = document.getElementById("playerInfoContainer");
     const playerInfoContainerChildren = playerInfoContainer.children;

     Array.from(playerInfoContainerChildren).forEach((child) => {
        console.log("child: ", child);
        adjustFontSize(child);
     });

    function adjustFontSize(textField) {
        let fontSize = 10; // Starting font size
        textField.style.fontSize = fontSize + "px";

        function increaseFontSize() {
            // Here, you will check the scrollWidth and clientWidth after the layout updates
            requestAnimationFrame(() => {
                console.log("scrollWidth: ", textField.scrollWidth);
                console.log("clientWidth: ", textField.clientWidth);
                
                if (textField.scrollWidth <= textField.clientWidth && fontSize < 30) {
                    fontSize++;
                    textField.style.fontSize = fontSize + "px";
                    increaseFontSize();
                } else {
                    textField.style.fontSize = (fontSize - 1) + "px";
                    console.log("Final fontSize: ", textField.style.fontSize);
                }
            });
        }

        increaseFontSize();
    }
</script>
</html>

要了解requestAnimationFrame，请参阅文档这里

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.