如何使用 JavaScript 填充列?
javascriptweb developmentfront end technology更新于 2024/6/21 9:57:00
在本教程中，我们将学习如何使用 JavaScript 填充列。使用 columnFill 属性填充列。将其填充为 auto 以按顺序填充，或 balance 以在列之间平均分配内容。
columnFill 属性是指定应如何填充列的属性，自动、平衡或以任何其他方式填充。
语法
以下是在 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 属性的值。
