Thuộc tính HTML DOM columnRuleColor được sử dụng để thiết lập hoặc trả về màu quy tắc giữa các cột.
Sau đây là cú pháp cho -
Đặt thuộc tính columnRuleColor -
object.style.columnRuleColor = "color|initial|inherit"
Ở đây, màu sắc chỉ định màu của quy tắc. Ban đầu đặt giá trị thành giá trị mặc định và kế thừa đặt giá trị đó thành giá trị thuộc tính mẹ.
Chúng ta hãy xem một ví dụ cho thuộc tính columnRuleColor -
Ví dụ
<!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> Đầu ra
Khi nhấp vào “Thay đổi màu quy tắc cột” nút -
