如何使用JavaScript設定專案相對於其他專案收縮的方式？

Javascript Web 開發前端技術

在本教程中，讓我們瞭解一下如何在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`屬性。此屬性控制專案根據其餘元素收縮的程度。

Shubham Vora

更新於：2022年11月15日

241 次瀏覽

啟動您的職業生涯

完成課程後獲得認證

開始學習