HTML DOM Style columnRule Property Last Updated : 29 Jan, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report The Style columnRule property in HTML DOM sets or returns the width, style, and color of the rule between the columns. To get the columnRule Propertyobject.style.columnRule = valueTO set the columnRule propertyobject.style.columnRule = "column-rule-width column-rule-style column-rule-color | initial | inherit"Property Values: Property Value Description columnRuleWidth Default value is medium. Sets the width between columns. columnRuleStyle Sets the style of the rule. "none" is default value. columnRuleColor Sets the color of the rule. Element color is default value. initial Sets the default value. inherit Inherit property from parent element. Return Value: It will return a String representing the column-rule property of a selected element. Example 1: Set the columnRuleWidth, columnRuleStyle and columnRuleColor using columnRule property. html <!DOCTYPE html> <html> <head> <title> HTML DOM Style columnRule Property </title> <style> body { text-align: center; } #GFG { width: 80%; height: 50%; border: 2px solid green; padding: 10px; column-count: 3; margin: auto; text-align: justify; } </style> </head> <body> <h1>GeeksforGeeks</h1> <h3>HTML DOM Style columnRule Property</h3> <div id="GFG"> 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. </div><br> <input type="button" onclick="myGeeks()" value="Submit" /> <script> function myGeeks() { document.getElementById("GFG") .style.columnRuleWidth = "3px"; document.getElementById("GFG") .style.columnRuleStyle = "solid"; document.getElementById("GFG") .style.columnRuleColor = "red"; } </script> </body> </html> Output: Example 2: This sets the property value to its default value of the property. For the initial value rule-style and rule-color will be none and default color. html <!DOCTYPE html> <html> <head> <title> HTML DOM Style columnRule Property </title> <style> body { text-align: center; } #GFG { 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; margin: auto; text-align: justify; } </style> </head> <body> <h1>GeeksforGeeks</h1> <h3>HTML DOM Style columnRule Property</h3> <div id="GFG"> 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. </div><br> <input type="button" onclick="myGeeks()" value="Submit" /> <script> function myGeeks() { document.getElementById("GFG") .style.columnRule = "initial"; } </script> </body> </html> Output: Example 3: Inherits the property from its parent element. Here, by using inherit we can set the different rule-style and rule-color different that it was set. html <!DOCTYPE html> <html> <head> <title> HTML DOM Style columnRule Property </title> <style> body { text-align: center; } #GFG { 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; margin: auto; text-align: justify; } </style> </head> <body> <h1>GeeksforGeeks</h1> <h3>HTML DOM Style columnRule Property</h3> <div id="GFG"> 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. </div><br> <input type="button" onclick="myGeeks()" value="Submit" /> <script> function myGeeks() { document.getElementById("GFG") .style.columnRule = "inherit"; } </script> </body> </html> Output: Note: Use MozColumnRule for Mozilla Firefox. Supported Browsers: Google Chrome 50Edge 12Firefox 52Opera 11.1Safari 9 Comment More infoAdvertise with us Next Article HTML | DOM Style listStyle Property K Kanchan_Ray Follow Improve Article Tags : Web Technologies HTML HTML-DOM HTML-Property Similar Reads HTML | DOM Style listStyle Property The Style listStyle Property in HTML DOM used to set up to three list properties namely list-style-typelist-style-positionlist-style-image Syntax: It returns the listStyle property.object.style.listStyleIt used to set the listStyle property.object.style.listStyle = "type position image|initial|inher 2 min read HTML | DOM Style outlineStyle Property The Style outlineStyle property in HTML DOM is used to set or return the style of the outline around an element. Syntax: It is used to return the outlineStyle property.object.style.outlineStyleIt is used to set the outlineStyle property.object.style.outlineStyle = value Property Values: none: This i 2 min read HTML | DOM Heading Object The DOM Heading Object is used to represent the HTML <Heading> elements. The Heading elements is accessed by getElementById().Properties: align: This element contains a align attribute which is used to sets or returns the alignment of the heading elements. Syntax: document.getElementById("ID") 1 min read HTML | DOM Ul Object The DOM Ul Object is used to represent the HTML <ul> element .the ul element is accessed by getElementById().Properties: compact: It is used to set or return whether the height of the unordered list would be render smaller than normal, or not. type: It is used to set or return the value of the 2 min read HTML | DOM Time Object The DOM Time Object is used to represent the HTML Time element . The Time element is accessed by getElementById().Properties: dateTime: It contains single attribute datetime which is used to set or return the date/time in a machine-readable form of the element. Syntax: document.getElementById("ID"); 2 min read HTML DOM insertAdjacentHTML() Method The DOM insertAdjacentHTML() method is used to insert a text as HTML file to a specified position. This method is used to change or add text as HTML. Syntax : node.insertAdjacentHTML(specify-position, text-to-enter) Return Value : This will return the page with the specified change. There are four l 2 min read HTML DOM | Style pageBreakAfter Property The Style pageBreakAfter property is used for setting or returning the page-break behavior after an element in printing or print preview. The Style pageBreakAfter property does not affect the absolutely positioned elements. Syntax : To get the property: object.style.pageBreakAfter To set the propert 2 min read HTML | DOM Style columnGap Property The DOM Style columnGap property specifies the gap between the columns. Syntax : For return the value: object.style.columnGap For set the value: object.style.columnGap = "length|normal|initial|inherit" Property Values: length: Set the column gap in length unit. normal: The default value of column ga 4 min read HTML | DOM Style textDecorationColor Property The Style textDecorationColor property in HTML DOM is used to set the color of the text-decoration like underlines, overlines, and line-throughs. It can also return the text-decoration color. Syntax: It returns the textDecorationColor property.object.style.textDecorationColorIt is used to set the te 2 min read HTML DOM insertAdjacentElement() Method The insertAdjacentElement() method inserts the specified element at the specified position. The legal values for this position are. afterbeginafterendbeforebeginbeforeend Syntax: node.insertAdjacentElement(position, element) Parameters: This method requires 2 parameters. position: A position relativ 2 min read Like