資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究使用 JavaScript 設定元素跨越的列數。
在本教程中，我們將學習如何使用 JavaScript 設定元素跨越的列數。
將長段落或文章分成多列可以提高其可讀性。'column-count' CSS 屬性將文字分成多列。如果希望列在 JavaScript 中跨越，請將 columnSpan 屬性設定為 all。
要使用 JavaScript 設定元素跨越的列數，有多種方法，在本教程中，我們將討論其中兩種：
- 設定 columnSpan 屬性
- 使用 style.setProperty 方法
設定 columnSpan 屬性
在 JavaScript 中，元素的 columnSpan 屬性指定元素應跨越多少列。元素物件的 style 物件包含此屬性。因此，首先，我們需要使用 document.getElementById() 方法訪問元素物件以設定此屬性，然後使用 columnSpan 屬性指定元素應跨越多少列。
語法
// setting the columnSpan property
document.getElementById('id').style.columnSpan = 'none | all | inherit | initial'
在上述語法中，我們使用 document.getElementById() 方法設定 columnSpan 屬性，該方法返回 id 為 'id' 的元素的元素物件。
引數
none - 元素將跨越一列。這是預設值。
all - 元素將跨越所有列。
inherit - 此屬性繼承自其父元素的屬性。
initial - 此屬性設定為預設值。
示例
在下面的示例中，我們使用了 columnSpan 屬性來使用 JavaScript 設定元素跨越的列數。我們使用了一個與點選事件關聯的按鈕“設定 columnSpan”，以執行“setColumnSpan()”函式。此函式使用 document.getElementById() 方法訪問元素物件，然後將 columnSpan 屬性設定為“all”。
<html> <body> <h2>Set how many columns an element should span across with JavaScript using the <i>columnSpan property</i></h2> <button onclick="setColumnSpan()">Set columnSpan</button> <div id="root" style=" column-count: 4; padding: 5px; background-color: rgb(240, 248, 255); " > <h2 id="heading" style="background-color: rgb(181, 219, 255); padding: 5px"> Heading Of This Text </h2> Welcome to Tutorialspoint. Welcome to Tutorialspoint. Welcome to Tutorialspoint. Welcome to Tutorialspoint. 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 columnSpan' button click event handler funtion function setColumnSpan() { const heading = document.getElementById('heading') // setting the columnSpan property heading.style.columnSpan = 'all' } </script> </body> </html>
使用 setProperty() 方法
在 JavaScript 中，setProperty() 方法設定元素的新屬性或現有屬性。元素物件的 style 物件包含此方法。例如，必須使用 document 訪問元素物件以指定元素應跨越多少列。getElementById() 方法，然後我們可以使用此方法。此方法採用兩個引數。setProperty() 方法的屬性名稱引數應為“column-span”，值和優先順序將根據使用者的需求而定。
語法
document.getElementById('id').style.setProperty(property_name, value, priority)
在上述語法中，我們使用 document.getElementById() 方法使用 setProperty() 方法。
引數
property_name - 要設定的屬性的名稱。
value - 屬性的新值。
priority - 屬性值的優先順序（可選）。
示例
在下面的示例中，我們使用了 setProperty 方法來使用 JavaScript 設定元素跨越的列數。我們使用了一個輸入欄位來獲取使用者的列跨度值輸入。按鈕“設定列跨度”與點選事件相關聯，該事件執行“setColumnSpan()”函式，該函式根據輸入欄位的值設定元素應跨越多少列。
<html> <body> <h2>Set how many columns an element should span across with JavaScript using the <i>setProperty method</i></h2> <h4>Enter the column-span value:</h4> <input type="text" name="column-span" id="column-span" value = "all"/> <button onclick="setColumnSpan()">Set Column Span</button> <div id="root" style=" column-count: 4; background-color: rgb(240, 248, 255); border: 1px solid gray; margin: 5px 0px; " > <h2 id="heading" style="background-color: rgb(181, 219, 255); padding: 5px" > Heading Of This Text </h2> Welcome to Tutorialspoint. Welcome to Tutorialspoint. Welcome to Tutorialspoint. Welcome to Tutorialspoint. 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 columnSpan' button click event handler funtion function setColumnSpan() { const heading = document.getElementById('heading') // user input value for the column-span const column_span = document.getElementById('column-span').value heading.style.setProperty('column-span', column_span) } </script> </body> </html>
在本教程中，我們學習瞭如何使用 JavaScript 設定元素跨越的列數。我們使用了 columnSpan 屬性和 setProperty 方法來指定元素應跨越多少列。此外，我們還看到了兩個示例：透過按鈕點選設定列跨度以及使用使用者輸入欄位值設定列跨度。當然，使用者可以根據自己的需求使用任何一種方法。
270 次檢視
