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

启动您的职业生涯

通过完成课程获得认证

开始
广告