HTML | DOM 样式 columnSpan 属性

DOM 样式 columnspan 属性用于指定元素应跨越的列数。

句法：
• 它返回 columnSpan 属性：

  object.style.columnSpan
  

• 它设置 columnSpan 属性：

  object.style.columnSpan = "1|all|initial|inherit"
  

属性值：

• 1：元素的默认值。用于跨越元素一列。
• all：用于将元素跨越到所有列。
• initial：用于设置其默认值。
• 继承：用于从其父级设置属性。

返回值：该属性返回一个字符串，表示元素的列跨度属性。
示例 1：将 columnSpan 属性设置为“all”。

  

    
        HTML | DOM Style columnSpan Property
    
    
        #main {
            column-count: 3;
            /* Standard syntax */
        }
    

  

    
        GeeksForGeeks
        DOM Style columnSpan Property 
  
        Click
  
        
             
              It is a good platform to learn programming.
             
          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.
        
  
        
            function geeks() {
                // Code for old Chrome, Safari, Opera
                document.getElementById("h2tag").style.WebkitColumnSpan =
                                                                    "all";
  
                // Foe other standard browsers.  
                document.getElementById("h2tag").style.columnSpan = "all";
            }
        
    

  

输出：

在点击按钮之前：

点击按钮后：

示例 2：将 columnSpan 属性设置为“all”。

  

    
        HTML | DOM Style columnSpan Property
    
    
        #main {
            column-count: 3;
            /* Standard syntax */
            border: 2px solid green;
        }
          
        #h2tag {
            background-color: orange;
            color: lime;
        }
    

  

    
        GeeksForGeeks
        DOM Style columnSpan Property 
  
        Click
        
        
            
              GeeksforGeeks is a good platform to learn 
              programming.
            
          It is a good platform to learn programming. 
          It is an educational website. 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. Also, any 
          geeks can help other geeks by writing articles
          on the GeeksforGeeks, publishing articles follow
          few steps that are Articles that need little 
          modification/improvement from reviewers are 
          published first. To quickly get your articles 
          reviewed, please refer existing articles, their
          formatting style, coding style, and try to make 
          you are close to them. In case you are a beginner,
          you may refer Guidelines to write an Article
        
  
        
            function geeks() {
                // Code for old Chrome, Safari, Opera
                document.getElementById("h2tag").style.WebkitColumnSpan
                                            = "all";
  
                // For other standard browsers.
                document.getElementById("h2tag").style.columnSpan
                                               = "all";
            }
        
    

  

输出：
在点击按钮之前：

点击按钮后：

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

• 谷歌浏览器 50.0
• 浏览器 10.0
• 歌剧 37.0
• Safari 9.0