数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 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 属性用于设置列之间的间距。
参数
长度 - 列之间的间距长度。
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 方法设置列间距。用户可以根据自己的需求使用任何一种方法。
1K+ 浏览量
