如何使用 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 次浏览

开启您的职业生涯

完成课程获得认证

开始学习
广告