HTML | DOM 样式 columnCount 属性

DOM Style columnCount属性指定了一个数字，该数字定义了一个元素应该被划分成的列数。

句法 ：

• 要返回值：

  object.style.columnCount
  

• 要设置值：

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

属性值：

• number：指定列数。
• auto：默认值，取决于一些属性。
• 初始：设置默认值。
• 继承：从父元素继承属性。

返回值：这将返回一个表示元素列数属性的字符串。

1. number：它指定所有文本将流入的列数。
   示例 1：

     
   
       
           HTML | DOM Style columnCount Property
       
       
           #mainDIV {
               width: 700px;
               height: 50%;
               border: 2px solid green;
               padding: 10px;
               column-gap: 50px;
           }
             
           #p1 {
               column-gap: 50px;
           }
       
   
     
   
     
       
           
               
               Welcome to GeeksforGeeks.!
            
           An operating system acts as an intermediary
           between the user of a computer and computer 
           hardware. The purpose of an operating system
           is to provide an environment in which a user
           can execute programs in a convenient and 
           efficient manner. An operating system is 
           software that manages the computer hardware.
           The hardware must provide appropriate 
           mechanisms to ensure the correct operation
           of the computer system and to prevent a user
           programs from interfering with the proper 
           operation of the system.
           
         
       
       
       
       
           function mainFunction() {
               
               //  Set columnCount.
               document.getElementById(
                 "mainDIV").style.columnCount = "4";
           }
       
     
   
     

   输出 ：
   • 点击前：
     
   • 点击后：
     
2. auto：它是默认值，取决于 columnWidth 等属性。
   示例 2：

     
   
       
           HTML | DOM Style columnCount Property
       
       
           #mainDIV {
               width: 700px;
               height: 50%;
               border: 2px solid green;
               padding: 10px;
           }
             
           #p1 {
               column-gap: 50px;
           }
       
   
     
   
     
       
           
             Welcome to GeeksforGeeks.!
           
           An operating system acts as an intermediary
           between the user of a computer and computer 
           hardware. The purpose of an operating system
           is to provide an environment in which a user
           can execute programs in a convenient and 
           efficient manner. An operating system is 
           software that manages the computer hardware.
           The hardware must provide appropriate 
           mechanisms to ensure the correct operation
           of the computer system and to prevent user
           programs from interfering with the proper 
           operation of the system.
           
       
       
       
       
           function mainFunction() {
               
               document.getElementById(
                 "mainDIV").style.columnWidth = "100px";
                
               //  Set columnCount.
               document.getElementById(
                 "mainDIV").style.columnCount = "auto";
           }
       
     
   
     

   输出：
   • 点击前：
     
   • 点击后：
     
3. 初始：将属性值设置为其属性的默认值。
   示例 3：

     
   
       
           HTML | DOM Style columnCount Property
       
       
           #mainDIV {
               width: 700px;
               height: 50%;
               border: 2px solid green;
               padding: 10px;
               column-count: 4;
           }
             
           #p1 {
               column-gap: 50px;
           }
       
   
     
   
     
       
           
             Welcome to GeeksforGeeks.!
           
           An operating system acts as an intermediary
           between the user of a computer and computer 
           hardware. The purpose of an operating system
           is to provide an environment in which a user
           can execute programs in a convenient and 
           efficient manner. An operating system is 
           software that manages the computer hardware.
           The hardware must provide appropriate 
           mechanisms to ensure the correct operation
           of the computer system and to prevent user
           programs from interfering with the proper 
           operation of the system.
         
       
       
       
         
     
           function mainFunction() {
             
               //  Set columnCount.
               document.getElementById(
                 "mainDIV").style.columnCount = "initial";
           }
       
     
   
     

   输出：
   • 点击前：
     
   • 点击后：
     
4. 继承：它从其父元素继承此属性。
   示例 4：

     
   
       
           HTML | DOM Style columnCount Property
       
       
           #mainDIV {
               width: 700px;
               height: 50%;
               border: 2px solid green;
               padding: 10px;
           }
             
           #p1 {
               column-gap: 50px;
               column-count: 4;
           }
       
   
     
   
     
       
           
             Welcome to GeeksforGeeks.!
            
           An operating system acts as an intermediary
           between the user of a computer and computer 
           hardware. The purpose of an operating system
           is to provide an environment in which a user
           can execute programs in a convenient and 
           efficient manner. An operating system is 
           software that manages the computer hardware.
           The hardware must provide appropriate 
           mechanisms to ensure the correct operation
           of the computer system and to prevent user
           programs from interfering with the proper 
           operation of the system.
         
       
       
       
         
     
           function mainFunction() {
               
             //  Set columnCount.
             document.getElementById(
                 "p1").style.columnCount = "inherit";
           }
       
     
   
     

   输出：
   • 点击前：
     
   • 点击后：
     

   注意：对 Mozilla Firefox 使用MozColumnRule 。

   支持的浏览器： HTML支持的浏览器| DOM 样式 columnCount 属性
   下面列出：

   • 谷歌浏览器
   • 边缘
   • 火狐
   • 歌剧
   • 苹果浏览器