HTML - DOM Style 物件 columns 屬性

HTML DOM Style 物件的 **columns** 屬性是 `columnWidth` 和 `columnCount` 屬性的簡寫屬性，用於設定列寬和列數。

語法

設定 columns 屬性

object.style.columns= "auto | column-width | column-count | initial | inherit";

獲取 columns 屬性

object.style.columns;

屬性值

值	描述
auto	預設值，將列數和列寬都設定為 auto。
column-width	設定列寬。
column-count	指定元素將被分成多少列。
initial	將此屬性設定為其預設值。
inherit	繼承其父元素的屬性值。

返回值

返回一個字串值，表示元素的 columns 屬性。

HTML DOM Style 物件 'columns' 屬性示例

以下示例使用 columns 屬性設定列寬並定義列數。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object columns Property
    </title>
</head>
<body>
    <p>Click to set column count and width.</p>
    <button onclick="fun()">Click</button>
    <p id="color">
        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("color")
                .style.columns = "45px 4";
        }
    </script>
</body>
</html>

支援的瀏覽器

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

html_dom_style_object_reference.htm

列印頁面