如何使用 JavaScript 填充列？

在本教程中，我們將學習如何使用 JavaScript 填充列。使用 columnFill 屬性填充列。將其設定為 auto 以順序填充，或設定為 balance 以在列之間平均分配內容。

columnFill 屬性指定如何填充列，可以是 auto、balanced 或其他方式。

語法

以下是 JavaScript 中設定 columnFill 屬性的語法：

selectedElement.style.columnFill="value";

這裡，selectedElement 是要新增 columnFill 屬性的元素，使用 style 是在 JavaScript 中向元素新增任何 CSS 屬性的方法。在 style 之後是屬性名稱，即上述語法中的 columnFill。完成所有這些操作後，您需要以字串的形式為屬性提供有效值，該值將在呈現 JavaScript 程式碼時應用於元素。

columnFill 屬性的值：

  • balanced - 這是任何 JavaScript 文件中任何元素呈現的預設值。它將使用等量的內容填充文件中的每一列，並且不允許列超出瀏覽器提供的高度。
  • initial - 此值用於將 columnFill 屬性設定為其預設值。
  • inherit - columnFill 屬性的 inherit 值用於繼承或從當前新增它的元素的父元素獲取值。
  • auto - columnFill 屬性的 auto 值用於填充列，直到達到其高度，並將填充內容直到高度用盡。因此，此值可能不會平均填充所有列。

注意 - 您還可以使用 columnCount 屬性新增要用於特定文件的列數。使用此屬性的語法也類似於 columnFill 屬性的語法。但是，提供的值將是一個數值，也以字串形式給出，並使用 columnCount 代替 columnFill。

演算法

  • 步驟 1 - 在步驟 1 中，我們需要建立一個按鈕，透過單擊該按鈕來觸發 columnFill 屬性。
  • 步驟 2 - 在下一步中，我們需要一些內容和一個元素，該元素將在單擊按鈕之前和之後顯示內容。
  • 步驟 3 - 在第三步中，我們將使用上面討論的 JavaScript 語法將 columnFill 屬性新增到 HTML 元素，並在這一步中給出列數。

示例 1

下面的示例將解釋 balanced 值或關鍵字的使用和內容分配。

<html>
<head>
   <title>How to fill columns with JavaScript? </title>
</head>
<body>
   <p>By clicking the "Fill the columns" button it will create three
   different columns and fill all of them "equal distribution of content",
   until content is ended.</p>
   <button onclick="display()">Fill the columns (with balance
   value)</button>
   <p id="result">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
      eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
      ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
      est laborum.
   </p>
   <script>
      function display() {
         document.getElementById("result").style.columnCount = "3";
         document.getElementById("result").style.columnFill =
         "balance";
      }
   </script>
</body>
</html>

在上例中，p 是演示元素，它使用 columnFill 屬性的 balance 值在單擊按鈕時將其內容平均分成三列。

示例 2

下面的示例將說明 columnFill 屬性的 auto 值的使用和內容對齊方式。

<html>
<body>
   <button onclick="display()">Fill the columns(with auto value)</button>
   <p id="result">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
      est laborum.
   </p>
   <script>
      function display() {
         document.getElementById("result").style.columnCount = "3";
         document.getElementById("result").style.columnFill = "auto";
      }
   </script>
</body>
</html>

在上例中，p 是演示元素，它可能不會平均地將內容分成三列，因為它使用了 columnFill 屬性的 auto 值。

示例 3

下面的示例將說明將 inherit 屬性值應用於 columnFill 屬性。

<html>
<body>
   <button onclick="display()">Fill the columns(with inherit
   value)</button>
   <h3>Content of parent will appear in three columns.</h3>
   <div id="columns">I'm the parent element. I'm the parent element. I'm
      the parent element. I'm the parent element.
      I'm the parent element. I'm the parent element. I'm the parent
      element. I'm the parent element. I'm the parent
      element. I'm the parent element. I'm the parent element. I'm the
      parent element. I'm the parent element. I'm the
      parent element. I'm the parent element. I'm the parent element.
      I'm the parent element. I'm the parent element.
      I'm the parent element. I'm the parent element. I'm the parent
      element. I'm the parent element. I'm the parent
   element. I'm the parent element. I'm the parent element.</div>
   <h3>Content of child will appear in four columns.</h3>
   <p id="result">I'm the child element. I'm the child element. I'm the
      child element. I'm the child element. I'm the
      child element. I'm the child element. I'm the child element. I'm
      the child element. I'm the child element. I'm
      the child element. I'm the child element. I'm the child element.
      I'm the child element. I'm the child element.
      I'm the child element. I'm the child element. I'm the child
      element. I'm the child element. I'm the child
      element. I'm the child element. I'm the child element. I'm the
      child element. I'm the child element. I'm the child
      element. I'm the child element. I'm the child element.
   </p>
   <script>
      function display() {
         document.getElementById("columns").style.columnCount = "3";
         document.getElementById("columns").style.columnFill = "auto";
         document.getElementById("result").style.columnCount = "4";
         document.getElementById("result").style.columnFill =
         "inherit";
      }
   </script>
</body>
</html>

在此示例中，div 是父元素，而 p 是子元素。這裡，div 的值為 auto，而 p 從父元素繼承相同的值來填充列。

在本教程中，我們學習瞭如何使用 JavaScript 填充列，並透過示例學習了 columnFill 屬性的值。

更新於：2022年10月31日

591 次瀏覽

開啟您的職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.