如何使用 JavaScript 设置列之间的间隙?
在本教程中，我们将学习如何使用 JavaScript 设置列之间的间隙。
通过将较长的段落或文章分成多列，可以提高其可读性。使用"column-count"CSS 属性将文本分成多列。列之间需要有空格或间隙，以使每列彼此分开。
要使用 JavaScript 设置列之间的间隙，我们有多种方法，在本教程中，我们将讨论其中两种 -
使用 style.columnGap 属性
使用 style.setProperty() 方法
使用 style.columnGap 属性
元素的 style.columnGap 属性用于设置包含长文本的元素的列之间的间隙。首先，我们需要使用 document.getElementById() 方法访问元素对象，然后使用 style.columnGap 属性设置列之间的间隙。
语法
const element = document.getElementById('id')
element.style.columnGap = 'length | normal | inherit | initial'
在上述语法中，"id"是元素的 id 属性。document.getElementById() 方法用于访问元素，style.columnGap 属性用于设置列之间的间隙。
参数
length − 列之间间隙的长度。
normal − 这是默认值。设置列之间的正常间隙。
inherit − 列之间的间隙由其父元素的属性继承。
initial − 列之间的间隙设置为默认值。
示例
在下面的示例中，我们使用 style.columnGap 属性通过 JavaScript 设置列之间的间隙。我们使用按钮"设置列间隙"单击事件来执行设置列之间间隙的"setColumnGap()"函数。
<html> <head> <style> #root { column-count: 4; padding: 10px; margin: 5px 0px; border: 1px solid black; background-color: aliceblue; } </style> </head> <body> <h2> Using <i> style.columnGap </i> property</h2> <p> Click the "Set Column Gap" button to set the gap between the columns to 70px. </p> <button onclick="setColumnGap()"> Set Column Gap </button> <div id="root"> This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </div> <script> // 'Set Column Gap' button click event handler function function setColumnGap() { const root = document.getElementById('root') // set the gap between the columns using style.columnGap property root.style.columnGap = '70px' } </script> </body> </html>
使用 style.setProperty() 方法
在 JavaScript 中，style.setProperty 方法设置元素的属性，无论是新的还是现有的。也可以使用此方法设置列之间的间隙。首先，使用 document.getElementById() 方法访问元素，然后使用 style.setProperty 方法设置"column-gap"属性。 style.setProperty 方法的属性名称参数应为"column-gap"，值和优先级将根据用户的要求。
语法
const element = document.getElementById('id')
element.style.setProperty(property_name, value, priority)
在上述语法中，document.getElementById() 方法用于访问 id 属性设置为"id"的 HTML 元素的元素对象，然后我们在该元素对象上使用 style.setProperty 方法。
参数
property_name − 要设置的属性的名称。
value − 属性的新值属性。
priority − 属性值的优先级(可选)。
示例
在下面的示例中，我们使用 style.setProperty 方法通过 JavaScript 设置列之间的间隙。我们使用输入字段来获取用户输入的列之间间隙的长度。按钮"设置列间隙"与执行"setColumnGap()"函数的单击事件相关联，该函数根据输入字段的值设置列之间的间隙。
<html> <head> <style> #root { column-count: 4; padding: 10px; margin: 5px 0px; border: 1px solid black; background-color: aliceblue; } </style> </head> <body> <h2> Set the gap between the columns using <i> style.setProperty method </i> with JavaScript </h2> <h4> Enter the gap (in px or %)between the columns: </h4> <input type="text" name="gap" id="gap" value="50px"> <button onclick="setColumnGap()"> Set Column Gap </button> <div id="root"> Welcome to Tutorialspoint. Welcome to Tutorialspoint. Welcome to Tutorialspoint. Welcome to Tutorialspoint. Welcome to Tutorialspoint. Welcome to Tutorialspoint. Welcome to Tutorialspoint. Welcome to Tutorialspoint. </div> <script> // 'Set Column Gap' button click event handler function function setColumnGap() { const root = document.getElementById('root') // user input value for the column gap const gap = document.getElementById('gap').value // set the gap between the columns using the style.setProperty method root.style.setProperty('column-gap', gap) } </script> </body> </html>
尝试以 px 或 % 输入，并查看如何设置列间隙。
在本教程中，我们学习了如何使用 JavaScript 设置列之间的间隙。我们使用 style.columnGap 属性和 style.setProperty 方法来设置列之间的间隙。在第一个示例中，我们使用按钮单击事件通过 style.columnGap 属性为列间隙设置预定义值，在第二个示例中，我们采用用户输入值通过 style.setProperty 方法设置列间隙。用户可以根据自己的需求使用其中任何一种方法。
