HTML - DOM樣式物件 columnRuleStyle 屬性

HTML DOM 樣式物件 **columnRuleStyle** 屬性用於設定或獲取列之間的規則樣式。

語法

設定 columnRuleStyle 屬性

object.style.columnRuleStyle= "none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit";

獲取 columnRuleStyle 屬性

object.style.columnRuleStyle;

屬性值

值	描述
none	這是預設值，表示沒有邊框。
hidden	與“none”相同，但它建立了一個透明或不可見的邊框，並佔用由邊框寬度指定的空間。這有助於解決表格元素中的邊框衝突。
dotted	指定點狀邊框。
dashed	指定虛線邊框。
solid	指定實線邊框。
double	定義雙線邊框，其中使用兩條線作為邊框，其寬度與 borderWidth 指定的寬度相同。
groove	指定一個 3D 凹槽邊框，其效果取決於 border-color 值。
ridge	指定一個 3D 凹槽邊框，其效果取決於 border-color 值。
inset	指定一個 3D 內嵌邊框，其效果取決於 border-color 值。
outset	指定一個 3D 外凸邊框，其效果取決於 border-color 值。
initial	用於將此屬性設定為其預設值。
inherit	用於繼承其父元素的屬性。

返回值

它返回一個字串值，表示元素的 column rule style 屬性。

HTML DOM 樣式物件“columnRuleStyle”屬性的示例

以下示例說明了各種 column rule style 屬性值。

新增列規則樣式

在下面的示例中，我們添加了一個實線規則，並將列規則樣式從實線更改為雙線和虛線。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object columnRuleStyle Property
    </title>
    <style>
        #rule {
            column-count: 3;
            column-rule: 2px solid;
        }
    </style>
</head>
<body>
    <p>Click to change the rule style.</p>
    <button onclick="fun()">Double</button>
    <button onclick="funtwo()">Dashed</button>
    <p id="rule">
        CSS is the acronym for "Cascading Style Sheet".
        It's a style sheet language used for describing
        the presentation of a document written in a markup
        language like HTML. CSS helps the web developers to
        control the layout and other visual aspects of the
        web pages. CSS plays a crucial role in modern web
        development by providing the tools necessary to create
        visually appealing, accessible, and responsive websites.
    </p>
    <script>
        function fun() {
            document.getElementById("rule")
                .style.columnRuleStyle = "double";
        }
        function funtwo() {
            document.getElementById("rule")
                .style.columnRuleStyle = "dashed";
        }
    </script>
</body>
</html>

將列規則樣式設定為“dotted”和“hidden”

以下示例將列規則樣式設定為點狀和隱藏。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object columnRuleStyle Property
    </title>
    <style>
        #rule {
            column-count: 3;
            column-rule: 2px solid;
        }
    </style>
</head>
<body>
    <p>Click to change the rule style.</p>
    <button onclick="fun()">Dotted</button>
    <button onclick="funtwo()">Hidden</button>
    <p id="rule">
        CSS is the acronym for "Cascading Style Sheet".
        It's a style sheet language used for describing
        the presentation of a document written in a markup
        language like HTML. CSS helps the web developers to
        control the layout and other visual aspects of the
        web pages. CSS plays a crucial role in modern web
        development by providing the tools necessary to create
        visually appealing, accessible, and responsive websites.
    </p>
    <script>
        function fun() {
            document.getElementById("rule")
                .style.columnRuleStyle = "dotted";
        }
        function funtwo() {
            document.getElementById("rule")
                .style.columnRuleStyle = "hidden";
        }
    </script>
</body>
</html>

將列規則樣式設定為“groove”和“ridge”

以下示例將列規則樣式設定為凹槽和脊線。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object columnRuleStyle Property
    </title>
    <style>
        #rule {
            column-count: 3;
            column-rule: 2px none;
        }
    </style>
</head>
<body>
    <p>Click to change the rule style.</p>
    <button onclick="fun()">Groove</button>
    <button onclick="funtwo()">Ridge</button>
    <p id="rule">
        CSS is the acronym for "Cascading Style Sheet".
        It's a style sheet language used for describing
        the presentation of a document written in a markup
        language like HTML. CSS helps the web developers to
        control the layout and other visual aspects of the
        web pages. CSS plays a crucial role in modern web
        development by providing the tools necessary to create
        visually appealing, accessible, and responsive websites.
    </p>
    <script>
        function fun() {
            document.getElementById("rule")
                .style.columnRuleStyle = "groove";
        }
        function funtwo() {
            document.getElementById("rule")
                .style.columnRuleStyle = "ridge";
        }
                
    </script>
</body>
</html>

將列規則樣式設定為“inset”和“outset”

以下示例將列規則樣式設定為內嵌和外凸。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object columnRuleStyle Property
    </title>
    <style>
        #rule {
            column-count: 3;
            column-rule: 2px none;
        }
    </style>
</head>
<body>
    <p>Click to change the rule style.</p>
    <button onclick="fun()">Inset</button>
    <button onclick="funtwo()">Outset</button>
    <p id="rule">
        CSS is the acronym for "Cascading Style Sheet".
        It's a style sheet language used for describing
        the presentation of a document written in a markup
        language like HTML. CSS helps the web developers to
        control the layout and other visual aspects of the
        web pages. CSS plays a crucial role in modern web
        development by providing the tools necessary to create
        visually appealing, accessible, and responsive websites.
    </p>
    <script>
        function fun() {
            document.getElementById("rule")
                .style.columnRuleStyle = "inset";
        }
        function funtwo() {
            document.getElementById("rule")
                .style.columnRuleStyle = "outset";
        }
                
    </script>
</body>
</html>

支援的瀏覽器

屬性
columnRuleStyle	是 50	是 12	是 52	是 9	是 11.1

html_dom_style_object_reference.htm

列印頁面