Thuộc tính columnRuleStyle dùng để xác định hoặc lấy kiểu dáng đường phân cách giữa các cột.
Cú pháp
object.style.columnRuleStyle = "none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit"
Giá trị tham số
| Giá trị | Mô tả |
|---|---|
| none | Không có đường (mặc định) |
| hidden | Giống none nhưng vẫn chiếm không gian |
| dotted | Đường chấm |
| dashed | Đường nét đứt |
| solid | Đường liền nét |
| double | Đường kép |
| groove | Đường 3D rãnh (nghịch đảo ridge) |
| ridge | Đường 3D nổi (nghịch đảo groove) |
| inset | Đường 3D chìm (nghịch đảo outset) |
| outset | Đường 3D nổi (nghịch đảo inset) |
| initial | Giá trị mặc định |
| inherit | Kế thừa từ phần tử cha |
Ví dụ minh họa
<!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 changeColumnRuleStyle() {
document.getElementById("DIV1").style.columnRuleStyle = "dashed";
document.getElementById("Sample").innerHTML = "Kiểu column rule đã được thay đổi";
}
</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"><br/>
<img src="https://www.tutorialspoint.com/images/QlikView.png"><br/>
<img src="https://www.tutorialspoint.com/images/hadoop.png">
</div>
<p>Thay đổi column style của div trên bằng cách nhấn nút dưới đây</p>
<button onclick="changeColumnRuleStyle()">Thay đổi Column Rule Style</button>
<p id="Sample"></p>
</body>
</html>
Kết quả
Ban đầu column-rule: 9px solid lightblue. Sau khi nhấn nút: 9px dashed lightblue.