如何使用 JavaScript 设置项目相对于其他项目的收缩比例？

在本教程中，我们将学习如何在 JavaScript 中设置项目相对于其他元素的收缩比例。

要设置项目相对于其他元素的收缩比例，我们可以使用 JavaScript 的 `flexShrink` 属性。让我们快速了解一下。

使用 Style flexShrink 属性

`flexShrink` 属性指定弹性项目相对于同一容器中的其他项目收缩的程度。要使 `flexShrink` 属性生效，元素必须是弹性元素。

此属性的值用作比率。例如，2:3 将 2 设置为第一个项目，3 设置为第二个项目。

用户可以按照以下语法使用 `flexShrink` 属性。

语法

object.style.flexShrink = "number|initial|inherit"

以上语法将 `flexShrink` 值设置为项目的样式。

值

  • 数字 − 指定项目相对于其他项目的收缩值。数字值只能为正值。默认值为 1。

  • initial − 设置此属性的默认值。

  • inherit − 继承父元素的属性值。

返回值

返回值是一个表示 `flexShrink` 属性的字符串。

示例 1

在这个例子中，有三个弹性项目和三组单选按钮。每组单选按钮的值从 1 到 5。

当用户点击单选按钮时，该函数会为每个块设置 `flexShrink` 值。`flexShrink` 值为 '1' 的块不会改变。其余三个块会根据 `flexShrink` 值收缩。`flexShrink` 值越高，项目收缩越多。

<html>
<head>
   <style>
      #flxShrCont {
         width: 100%;
         border: 1px solid black;
         display: flex;
      }
      #flxShrCont div {
         width: 100%;
      }
      #flxShrCont div:nth-child(odd) {
         background-color: lightblue;
      }
   </style>
</head>
<body>
   <h2> Setting the item shrink value relative to the rest of the elements using the <i> flexShrink property </i>
   </h2>
   <div id="flxShrWrap">
      <p> Choose flexShrink for block 1 </p>
      <input onclick="setFlexShrink1()" name="flxShrRad1" type="radio" value="1" checked> 1 </input>
      <input onclick="setFlexShrink1()" name="flxShrRad1" type="radio" value="2"> 2 </input>
      <input onclick="setFlexShrink1()" name="flxShrRad1" type="radio" value="3"> 3 </input>
      <input onclick="setFlexShrink1()" name="flxShrRad1" type="radio" value="4"> 4 </input>
      <input onclick="setFlexShrink1()" name="flxShrRad1" type="radio" value="5"> 5 </input>
      <p> Choose flexShrink for block 2 </p>
      <input onclick="setFlexShrink2()" name="flxShrRad2" type="radio" value="1" checked> 1 </input>
      <input onclick="setFlexShrink2()" name="flxShrRad2" type="radio" value="2"> 2 </input>
      <input onclick="setFlexShrink2()" name="flxShrRad2" type="radio" value="3"> 3 </input>
      <input onclick="setFlexShrink2()" name="flxShrRad2" type="radio" value="4"> 4 </input>
      <input onclick="setFlexShrink2()" name="flxShrRad2" type="radio" value="5"> 5 </input>
      <p> Choose flexShrink for block 3 </p>
      <input onclick="setFlexShrink3()" name="flxShrRad3" type="radio" value="1" checked> 1 </input>
      <input onclick="setFlexShrink3()" name="flxShrRad3" type="radio" value="2"> 2 </input>
      <input onclick="setFlexShrink3()" name="flxShrRad3" type="radio" value="3"> 3 </input>
      <input onclick="setFlexShrink3()" name="flxShrRad3" type="radio" value="4"> 4 </input>
      <input onclick="setFlexShrink3()" name="flxShrRad3" type="radio" value="5"> 5 </input>
   </div>
   <br>
   <br>
   <div id="flxShrCont">
      <div> Block 1 </div>
      <div> Block 2 </div>
      <div> Block 3 </div>
   </div>
   <script>
      function getRadioValue(groupName) {
         var radios = document.getElementsByName(groupName);
         for (i = 0; i < radios.length; i++) {
            if (radios[i].checked) {
               return radios[i].value;
            }
         }
         return null;
      }
      var flxShrCont = document.getElementById("flxShrCont");
      var flxShrEl = flxShrCont.getElementsByTagName("DIV");

      function setFlexShrink1() {
         flxShrEl[0].style.flexShrink = getRadioValue("flxShrRad1");
      }

      function setFlexShrink2() {
         flxShrEl[1].style.flexShrink = getRadioValue("flxShrRad2");
      }

      function setFlexShrink3() {
         flxShrEl[2].style.flexShrink = getRadioValue("flxShrRad3");
      }
   </script>
</body>
</html>

示例 2

在这个程序中，我们有两个弹性项目。用户可以使用下拉菜单为该程序提供输入。该程序使用两个函数跟踪下拉菜单的更改操作。

假设用户选择 1 和 5。橙色框将获得 1 的 `flexShrink` 值。红色框将获得 5。红色框比橙色框收缩更多。

<html>
<head>
   <style>
      input {
         width: 100%;
      }
      #flxShrUsrCont {
         width: 100%;
         border: 1px solid black;
         display: flex;
      }
      #flxShrUsr1,
      #flxShrUsr2 {
         border: 1px solid #000000;
         width: 500px;
         color: #ffffff;
      }
      #flxShrUsr1 {
         background-color: orange;
      }

      #flxShrUsr2 {
         background-color: red;
      }
      #flxShrUsrErr {
         color: red;
         display: none;
      }
   </style>
</head>
<body>
   <h2> Setting the shrinking value of the item relative to the rest of the elements using the <i> flexShrink property value through the dropdown </i>
   </h2>
   <p>Choose flexShrink for orange box</p>
   <select id="flxShrUsrSel1" onchange="setFlexShrinkOrange()">
      <option selected/> 1
      <option/> 2
      <option/> 3
      <option/> 4
      <option/> 5
   </select>
   <p>Choose flexShrink for red box</p>
   <select id="flxShrUsrSel2" onchange="setFlexShrinkRed()">
      <option selected/> 1
      <option/> 2
      <option/> 3
      <option/> 4
      <option/> 5
   </select>
   <br>
   <br>
   <div id="flxShrUsrWrap">
      <div id="flxShrUsrErr"> Please enter the flexShrink values and click the button </div>
   </div>
   <br>
   <br>
   <div id="flxShrUsrCont">
      <div id="flxShrUsr1"> Orange </div>
      <div id="flxShrUsr2"> Red </div>
   </div>
   <script>
      function setFlexShrinkOrange() {
         var flxShrUsrSelTag1 = document.getElementById("flxShrUsrSel1");
         var flxShrUsrSelIndx1 = flxShrUsrSelTag1.selectedIndex;
         var flxShrUsrSelStat1 = flxShrUsrSelTag1.options[flxShrUsrSelIndx1].text;
         var flxShrUsr1 = document.getElementById("flxShrUsr1");
         flxShrUsr1.style.flexShrink = flxShrUsrSelStat1;
      }
      function setFlexShrinkRed() {
         var flxShrUsrSelTag2 = document.getElementById("flxShrUsrSel2");
         var flxShrUsrSelIndx2 = flxShrUsrSelTag2.selectedIndex;
         var flxShrUsrSelStat2 = flxShrUsrSelTag2.options[flxShrUsrSelIndx2].text;
         var flxShrUsr2 = document.getElementById("flxShrUsr2");
         flxShrUsr2.style.flexShrink = flxShrUsrSelStat2;
      }
   </script>
</body>
</html>

本教程教我们如何设置 `flexShrink` 属性。此属性控制项目相对于其他元素收缩的程度。

更新于：2022年11月15日

浏览量：238

启动您的 职业生涯

完成课程获得认证

开始学习
广告