HTML DOM 样式的 columnCount 属性

htmlweb developmentfront end technology更新于 2024/3/13 17:48:17

HTML DOM 样式的 columnCount 属性用于设置元素要划分的列数。

以下是语法 −

设置 columnCount 属性 −

object.style.columnCount = "number|auto|initial|inherit"

以上属性解释如下:

值	描述
Number	用于设置元素内容将被划分成的列数。
Auto	列数由其他属性决定，例如"column-width" 。这是默认属性值。
Initial	用于将此属性设置为初始值。
Inherit	用于继承父级属性值

让我们看一个关于 columnCount 属性的示例 −

示例

<!DOCTYPE html>
<html>
<head>
<style>
   div {
      height: 120px;
      column-count: 2;
      border: 2px solid black;
      background-color: mediumvioletred;
   }
   div > div {
      background-color: yellow;
   }
</style>
<script>
   function changeColumnCount(){
      document.getElementsByTagName("div")[0].style.columnCount="4";
      document.getElementById("Sample").innerHTML="The column count is now increased to 4";
   }
</script>
</head>
<body>
   <div id="DIV1">
      <div></div>
   </div>
   <p>Change the above div column count property by clicking the below button</p>
   <button onclick="changeColumnCount()">Change Column Count</button>
   <p id="Sample"></p>
</body>
</html>