Thuộc tính columnRule của HTML DOM được sử dụng để lấy hoặc thiết lập thuộc tính columnRule. Đây là thuộc tính viết tắt để thao tác ba thuộc tính có têncolumnRuleColor, columnRuleStyle và columnRuleWidth.
Sau đây là cú pháp cho -
Đặt thuộc tính columnRule -
object.style.columnRule = "column-rule-width column-rule-style column-rule-color|initial|inherit"
Các thuộc tính trên được giải thích như sau -
| Giá trị | Mô tả |
|---|---|
| columnRuleWidth | Để thiết lập chiều rộng quy tắc giữa các cột. Nó được đặt thành trung bình theo mặc định. |
| columnRuleStyle | FF hoặc thiết lập kiểu quy tắc giữa các cột. Nó được đặt thành không theo mặc định. |
| columnRuleColor | Để thiết lập kiểu quy tắc giữa các cột. Nó được đặt thành không theo mặc định. |
| columnRuleColor | Để thiết lập màu quy tắc giữa các cột. Nó được đặt thành giá trị màu của phần tử theo mặc định. |
| tên đầu tiên | Để đặt thuộc tính này thành giá trị ban đầu. |
| kế thừa | Để kế thừa giá trị thuộc tính mẹ. |
Hãy để chúng tôi xem xét một ví dụ cho thuộc tính columnRule -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1 {
column-count: 4;
column-rule: 4px dashed darkolivegreen;
}
</style>
<script>
function changeColumnRule(){
document.getElementById("DIV1").style.columnRule="10px solid red";
document.getElementById("Sample").innerHTML="The column rule properties are now modified";
}
</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">
</div>
<p>Change the above div column rule properties by clicking the below button</p>
<button onclick="changeColumnRule()">Change Column Rule</button>
<p id="Sample"></p>
</body>
</html> Đầu ra
Khi nhấp vào “Thay đổi quy tắc cột” nút -
