The HTML DOM columns property is used for manipulating columnWidth and columnCount property.Following is the syntax for −Setting the columns property −object.style.columns = "auto|column-width column-count|initial|inherit"The above property values are explained as follows −ValueDescriptionAutoThissets the column-width and column-count to auto and is the defaultvalue.columnWidthForspecifying the column width.columnCountForspecifying the column numbers.initialForsetting this property to initial value.inheritToinherit the parent property valueLet us look at an example for the columns property −Example Live Demo    #DIV1{       columns: 5rem auto;    }    img {       border: 1px solid brown;    }    function changeColumns(){   ... Read More

The HTML DOM columnRuleWidth property is used for setting or getting the column rule width.Following is the syntax for −Setting the columnRuleWidth property −object.style.columnRuleWidth = "medium|thin|thick|length|initial|inherit"The above property values are explained as follows −ValueDescriptionthinThisspecifies a thin rule.mediumThisspecifies the medium rule and is the default value.thickThisspecifies a thin rule.lengthThisis used for specifying the rule width in length units.initialForsetting this property to initial value.inheritToinherit the parent property valueLet us look at an example for the columnRuleWidth property −Example Live Demo    #DIV1{       padding: 5px;       column-count: 5;       column-rule-width: 9px;       ... Read More

The HTML DOM Style columnRuleStyle property is used to define or return the style of column rule.Following is the syntax for −Setting the columnRuleStyle property −object.style.columnRuleStyle = "none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset| initial|inherit"The above property values are explained as follows −ValueDescriptionnoneThis is the default value specifying no rule.hiddenThis is same as "none" but will still take rule space. It is basically transparent but still there.dottedThis defines a dotted rule.dashedThis defines a dashed rule.solidThis defines a solid rule.doubleThis defines a double rule.grooveThis defines a 3d groove rule and is the opposite of ridge.ridgeThis defines a 3D ridged rule and is the opposite of grooveinsertThis defines ... Read More

The HTML DOM columnRuleColor property is used for setting or returning the rule color between columns.Following is the syntax for −Setting the columnRuleColor property −object.style.columnRuleColor = "color|initial|inherit"Here, color specifies the color of the rule. Initial sets the value to default value and inherit sets it to parent property value.Let us look at an example for the columnRuleColor property −Example Live Demo    #DIV1{       padding: 5px;       column-count: 5;       column-rule-width: 9px;       column-rule-style: solid;       column-rule-color: lightcoral;    }    function changeColumnRuleColor(){       ... Read More

The HTML DOM columnRule property is used for getting or setting the columnRule property. It is the shorthand property for manipulating three properties namedcolumnRuleColor, columnRuleStyle and columnRuleWidth.Following is the syntax for −Setting the columnRule property −object.style.columnRule = "column-rule-width column-rule-style column-rule-color|initial|inherit"The above properties are explained as follows −ValueDescriptioncolumnRuleWidthFor setting the rule width between columns. It is set to medium by default.columnRuleStyleFFor setting the rule style between columns. It is set to none by default.columnRuleColorFor setting the rule style between columns. It is set to none by default.columnRuleColorFor setting the rule color between columns. It is set to the element color value ... Read More

The HTML DOM Style columnGap property is used to specify the space between columns of an element.Following is the syntax for −Setting the columnGap property −object.style.columnGap = "length|normal|initial|inherit"The above properties are explained as follows −ValueDescriptionLengthSpecifying the length used to set gap between columnsNormalThis is the default value specifying a gap of 1em between columns.InitialFor setting this property to initial value.InheritTo inherit the parent property valueLet us look at an example for the columnGap property −Example Live Demo    div {       column-count: 4;       column-gap: 50px;       font-size: 1.2rem;    } ... Read More

The HTML DOM Style columnCount property is used to set the number of columns an element is to be divided.Following is the syntax for −Setting the columnCount property −object.style.columnCount = "number|auto|initial|inherit"The above properties are explained as follows:ValueDescriptionNumberFor setting the number of columns into which the content of the element will be divided.AutoThe number of colums are determined by other properties e.g. “column-width” .This is the default property value.InitialFor setting this property to initial value.InheritTo inherit the parent property valueLet us look at an example for the columnCount property −Example Live Demo    div {       height: ... Read More

The HTML DOM Style color property is used for getting or setting the color for the text. The color for the text can be specified in hexadecimal, rgb(), rgba(), hsl(), hsla() or using known keyword.Following is the syntax for −Setting the color property −object.style.color = "color|initial|inherit"The above properties are explained as follows −ValueDescriptionColorFor specifying the color value for the text.InitialFor setting this property to initial value.InheritTo inherit the parent property valueLet us look at an example for the color property −Example Live Demo Color property example This is paragraph 1 This is paragraph 2 This is paragraph 3 This ... Read More

The HTML DOM style clip property is used for setting or getting the positioned element visible part.Following is the syntax for −Setting the clip property −object.style.clip = "auto|rect(top right bottom left)|initial|inherit"The above properties are explained as follows −ValueDescriptionautoThe element doesn’t clip and this is the default value.rect(top right bottom left)It clips the shape according to the given four coordinates.initialFor setting this property to initial value.inheritTo inherit the parent property valueLet us look at an example for the clip property −Example Live Demo    div{       position:relative;    }    #IMG1{       width:200px;     ... Read More

The HTML DOM clear property is used for getting or setting the position of a floating element. It is used to specify whether an element should be moved below another floating element or not.Following is the syntax for −Setting the clear property −object.style.clear='none|left|right|both|initial|inherit'The above properties are explained as follows −ValueDescriptionleftElements are not floated on the left side.rightElements are not floated on the right sidebothElements are not floated on neither left nor right side.noneElements are floated on both sides and this is the default value.inheritTo inherit the parent property valueLet us look at an example for the clear property −Example Live Demo ... Read More