資料結構
網路
關係型資料庫管理系統
作業系統
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+ 瀏覽量
