คุณสมบัติ HTML DOM columnRuleColor ใช้สำหรับการตั้งค่าหรือคืนค่าสีกฎระหว่างคอลัมน์
ต่อไปนี้เป็นไวยากรณ์สำหรับ −
การตั้งค่าคุณสมบัติ columnRuleColor -
object.style.columnRuleColor = "color|initial|inherit"
ที่นี่ สี ระบุสีของกฎ Initial ตั้งค่าให้เป็นค่าดีฟอลต์และสืบทอดการตั้งค่าให้เป็นค่าคุณสมบัติพาเรนต์
ให้เราดูตัวอย่างสำหรับคุณสมบัติ columnRuleColor -
ตัวอย่าง
<!DOCTYPE html> <html> <head> <style> #DIV1{ padding: 5px; column-count: 5; column-rule-width: 9px; column-rule-style: solid; column-rule-color: lightcoral; } </style> <script> function changeColumnRuleColor(){ document.getElementById("DIV1").style.columnRuleColor="blue"; document.getElementById("Sample").innerHTML="The column rule color is now changed"; } </script> </head> <body> <div id="DIV1"> <img src="https://www.tutorialspoint.com/images/Swift.png"><br/> <img src="https://www.tutorialspoint.com/images/xamarian.png"><br/> <img src="https://www.tutorialspoint.com/images/pl-sql.png"><br/> <img src="https://www.tutorialspoint.com/images/asp-net.png"><br/> <img src="https://www.tutorialspoint.com/images/powerbi.png"><br/> <img src="https://www.tutorialspoint.com/images/Tableau.png"><br/> <img src="https://www.tutorialspoint.com/images/Big-Data-Analytics.png"><br/> <img src="https://www.tutorialspoint.com/images/microsoftproject.png"> <img src="https://www.tutorialspoint.com/images/QlikView.png"><br/> <img src="https://www.tutorialspoint.com/images/hadoop.png"> </div> <p>Change the above div column rule color by clicking the below button</p> <button onclick="changeColumnRuleColor()">Change Column Rule Color</button> <p id="Sample"></p> </body> </html>
ผลลัพธ์
เมื่อคลิกที่ “เปลี่ยนสีกฎของคอลัมน์” ปุ่ม −