如何使用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.