คุณสมบัติ HTML DOM columnRuleWidth ใช้สำหรับการตั้งค่าหรือรับความกว้างของกฎคอลัมน์
ต่อไปนี้เป็นไวยากรณ์สำหรับ −
การตั้งค่าคุณสมบัติ columnRuleWidth -
object.style.columnRuleWidth = "medium|thin|thick|length|initial|inherit"
ค่าคุณสมบัติข้างต้นมีคำอธิบายดังนี้ −
ค่า | คำอธิบาย |
---|---|
ผอม | นี่ระบุกฎแบบบาง |
ปานกลาง | ระบุกฎของสื่อและเป็นค่าเริ่มต้น |
หนา | นี่ระบุกฎแบบบาง |
ความยาว | ใช้สำหรับระบุความกว้างของกฎเป็นหน่วยความยาว |
ค่าเริ่มต้น | การตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น |
สืบทอด | การสืบทอดค่าคุณสมบัติหลัก |
ให้เราดูตัวอย่างสำหรับคุณสมบัติ columnRuleWidth -
ตัวอย่าง
<!DOCTYPE html> <html> <head> <style> #DIV1{ padding: 5px; column-count: 5; column-rule-width: 9px; column-rule-color: lightblue; column-rule-style: solid; } </style> <script> function changeColumnRuleWidth(){ document.getElementById("DIV1").style.columnRuleWidth="3px"; document.getElementById("Sample").innerHTML="The column rule width is now reduced"; } </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 width by clicking the below button</p> <button onclick="changeColumnRuleWidth()">Change Column Rule Width</button> <p id="Sample"></p> </body> </html>
ผลลัพธ์
เมื่อคลิก “เปลี่ยนความกว้างของกฎของคอลัมน์ ปุ่ม −