資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學如何使用 JavaScript 設定列間分隔線的顏色？
在本教程中，我們將學習如何使用 JavaScript 設定列間分隔線的顏色。
使用多列可以提高長段落或文章的可讀性。`column-count` CSS 屬性用於將文字分成幾列。要使用 JavaScript 設定列間分隔線的顏色，我們使用 `style` 物件的 `columnRuleColor` 屬性，該屬性位於 HTML 元素的 `element` 物件中。
使用 style.columnRuleColor 屬性
在 JavaScript 中，元素的 `style.columnRuleColor` 屬性用於設定元素列間分隔線的顏色。我們可以使用顏色名稱、十六進位制顏色程式碼或 RGB 顏色程式碼設定任何顏色。首先，我們需要使用 `document.getElementById()` 方法訪問元素物件，然後使用 `style.columnRuleColor` 屬性設定列間分隔線的顏色。
語法
const object = document.getElementById('element_id')
object.style.columnRuleColor = 'color | inherit | initial'
這裡“element_id”是 HTML 元素的 ID。我們使用 `document.getElementById()` 方法訪問該元素，然後使用 `style.columnRuleColor` 屬性設定列間分隔線的顏色。
引數
color − 列間分隔線的顏色。
inherit − 列間分隔線的顏色繼承自其父元素的屬性。
initial − 將列間分隔線的顏色設定為預設值。
示例 1
在下面的示例中，我們使用 `style.columnRuleColor` 屬性使用 JavaScript 設定列間分隔線的顏色。我們使用了按鈕“設定分隔線顏色”的點選事件來執行 `setRuleColor()` 函式，該函式設定列間分隔線的顏色。
<!DOCTYPE html> <html> <head> <style> #myID { column-count: 4; column-rule: 4px outset yellow; } </style> </head> <body> <h2> Using style.columnRuleColor Property </h2> <p>Click the below button to set the color of rule between columns:</p> <button onclick="display()">Change Color between Columns</button> <div id="myID"> 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> function display() { document.getElementById("myID").style.columnRuleColor = "red"; } </script> </body> </html>
示例 2
在下面的示例中，我們使用 `style.columnRuleColor` 屬性使用 JavaScript 設定列間分隔線的顏色。我們使用了一個顏色選擇器來獲取使用者輸入的列間分隔線的顏色，並透過按鈕點選事件將該顏色設定為元素的規則。按鈕“設定分隔線顏色”的點選事件將執行 `setRuleColor()` 函式，該函式使用使用者輸入的顏色設定列間分隔線的顏色。
<html> <head> <style> #root { column-count: 4; column-rule: 4px outset black; padding: 10px; margin: 5px 0px; border: 1px solid black; } </style> </head> <body> <h2> Using the style.columnRuleColor Property </h2> <p> Pick a color to set the color of rule between columns: </p> <input type="color" name="color" id="color"> <button onclick="setRuleColor()"> Set Rule Color </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. Welcome to Tutorialspoint. Welcome to Tutorialspoint. Welcome to Tutorialspoint. Welcome to Tutorialspoint. </div> <script> // 'Set Rule Color' button click event handler function function setRuleColor() { const root = document.getElementById('root') // user input color const color = document.getElementById('color').value // set the color of the rule between columns to the user input color using the style.columnRuleColor property root.style.columnRuleColor = color } </script> </body> </html>
在本教程中，我們學習瞭如何使用 JavaScript 設定列間分隔線的顏色。我們使用了 `style.columnRuleColor` 屬性來設定列間分隔線的顏色。在第一個示例中，我們看到了如何使用 `style.columnRuleColor` 屬性設定元素的分隔線顏色，在第二個示例中，我們看到了如何使用輸入欄位和 `style.columnRuleColor` 屬性獲取使用者輸入的顏色值來設定分隔線顏色。
152 次瀏覽
