HTML | DOM 样式 columnRule 属性

DOM 样式 columnRule属性设置列之间规则的宽度、样式和颜色。

句法 ：
• 获取 columnRule 属性

  object.style.columnRule = value
  

• 设置 columnRule 属性

  object.style.columnRule = "column-rule-width column-rule-style 
  column-rule-color|initial|inherit"
  

属性值：
• columnRuleWidth：默认值为中等。设置列之间的宽度。
• columnRuleStyle：设置规则的样式。 “无”是默认值。
• columnRuleColor：设置规则的颜色。元素颜色是默认值。
• 初始：设置默认值。
• 继承：从父元素继承属性。

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

示例 1： columnRuleWidth、columnRuleStyle 和 columnRuleColor。

  

    
        HTML | DOM Style columnRule Property
    
    
        #mainDIV {
            width: 80%;
            height: 50%;
            border: 2px solid green;
            padding: 10px;
            column-count: 3;
        }
    

  

  
    
        
         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 a 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.columnRuleWidth = "3px";
            document.getElementById(
            "mainDIV").style.columnRuleStyle = "solid";
            document.getElementById(
            "mainDIV").style.columnRuleColor = "red";
        }
    
  

  

输出 ：
点击前：

点击后：

示例 2：这将属性值设置为其属性的默认值。初始值规则样式和规则颜色将为无和默认颜色。

  

    
        HTML | DOM Style columnRule Property
    
    
        #mainDIV {
            width: 80%;
            height: 50%;
            border: 2px solid green;
            padding: 10px;
            column-count: 3;
            column-rule-style: solid;
            column-rule-width: 3px;
            column-rule-color: red;
        }
    

  

  
    
        
        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 a 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.columnRule = "initial";
        }
    
  

  

输出 ：
点击前：

点击后：

示例 3：从其父元素继承属性。在这里，通过使用继承，我们可以设置不同的规则样式和规则颜色。

  

    
        HTML | DOM Style columnRule Property
    
    
        #mainDIV {
            width: 80%;
            height: 50%;
            border: 2px solid green;
            padding: 10px;
            column-count: 3;
            column-rule-style: solid;
            column-rule-width: 3px;
            column-rule-color: red;
        }
    

  

  
    
        
        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.columnRule = "initial";
        }
    
  

  

输出 ：
点击前：

点击后：

注意：对 Mozilla Firefox 使用MozColumnRule。

支持的浏览器： HTML支持的浏览器 | DOM Style columnRule 属性列举如下：
• 谷歌浏览器
• 边缘
• 歌剧
• 苹果浏览器