HTML DOM中的Style columnRuleWidth屬性用於定義或確定列之間的規則寬度。
用法:
- 它返回columnRuleWidth屬性。
object.style.columnRuleWidth
- 它用於設置columnRuleWidth屬性。
object.style.columnRuleWidth = "medium|thin|thick|length| initial|inherit"
屬性值:
- thin:它用於在列之間設置精簡規則。
- medium:它用於在列之間創建中等寬度的規則。這是默認寬度。
- thick:它在列之間創建一個粗細寬度規則。
- length:用於按長度設置寬度。它不取負值。
- initial:它用於將columnRuleWidth屬性設置為其默認值。
- inherit:此屬性是從其父級繼承的。
返回值:它返回一個表示元素的column-rule-width屬性的字符串。
範例1:本示例描述了length屬性值。
<!DOCTYPE html>
<html>
<head>
<title>
HTML | DOM Style columnRuleWidth Property
</title>
<style>
#GFG {
/* For old Chrome and Safari browsers */
-webkit-column-count:4;
-webkit-column-rule:1px green solid;
/* For Firefox browser */
-moz-column-count:4;
-moz-column-rule:1px green solid;
-webkit-column-count:4;
-webkit-column-rule:1px green solid;
text-align:justify;
}
</style>
</head>
<body>
<div id = "GFG">
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.
</div>
<p>
Click on the button to change the
column-rule width
</p>
<button onclick = "myGeeks()">
Click Here!
</button>
<script>
function myGeeks() {
document.getElementById("GFG").style.columnRuleWidth
= "10px";
}
</script>
</body>
</html>
輸出:
之前單擊按鈕:
單擊按鈕後:
範例2:本示例描述中等屬性值。
<!DOCTYPE html>
<html>
<head>
<title>
HTML | DOM Style columnRuleWidth Property
</title>
<style>
#GFG {
/* For old Chrome and Safari browsers */
-webkit-column-count:4;
-webkit-column-rule:1px green solid;
/* For Firefox browser */
-moz-column-count:4;
-moz-column-rule:1px green solid;
-webkit-column-count:4;
-webkit-column-rule:1px green solid;
text-align:justify;
}
</style>
</head>
<body>
<div id = "GFG">
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.
</div>
<p>
Click on the button to change the
column-rule width
</p>
<button onclick = "myGeeks()">
Click Here!
</button>
<script>
function myGeeks() {
document.getElementById("GFG").style.columnRuleWidth
= "medium";
}
</script>
</body>
</html>
輸出:
之前單擊按鈕:
單擊按鈕後:
支持的瀏覽器:下麵列出了DOM Style columnRuleStyle屬性支持的瀏覽器:
- 穀歌瀏覽器
- Firefox使用MozColumnRuleWidth
- IE瀏覽器
- Opera
- 蘋果Safari
相關用法
- HTML Style right用法及代碼示例
- HTML Style top用法及代碼示例
- HTML Style borderRight用法及代碼示例
- HTML Style textAlign用法及代碼示例
- HTML Style wordSpacing用法及代碼示例
- HTML Style borderLeft用法及代碼示例
- HTML Style opacity用法及代碼示例
- HTML Style height用法及代碼示例
- HTML Style whiteSpace用法及代碼示例
- HTML Style textDecorationLine用法及代碼示例
- HTML Style columnRuleStyle用法及代碼示例
- HTML Style display用法及代碼示例
- HTML Style transformStyle用法及代碼示例
- HTML Style visibility用法及代碼示例
- HTML Style animationDirection用法及代碼示例
注:本文由純淨天空篩選整理自EnaMotwani大神的英文原創作品 HTML | DOM Style columnRuleWidth Property。非經特殊聲明,原始代碼版權歸原作者所有,本譯文未經允許或授權,請勿轉載或複製。