The HTML DOM Style flex property is used for setting or returning the flexible length for elements with display property set to flex. It is used to manipulate properties flexGrow, flexShrink and flexBasis.Following is the syntax for −Setting the flex property −object.style.flex = "flex-grow flex-shrink flex-basis|auto|initial|inherit"Following are the values −ValueDescriptionflex-growItgrows the item relative to the rest of the flexible item by agiven number.flex-shrinkItshrinks the item relative to the rest of the flexible items by agiven number.Anumber specifying how much the item will shrink relative to therest of the flexible itemsflex-basisForspecifiying the item length and takes any legal length unit.autoSetsthe three ... Read More

The HTML DOM Style filter property is used for defining visual effects to an element.Following is the syntax for −Setting the filter property −object.style.filter = "none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia()"The above property values are explained as follows −FilterDescriptionnoneThisspecifies no effects.blur(px)Thisapplies the blur effect.brightness(%)Foradjusting the image brightness. Takes value from 100%(originalimage) to above.contrast(%)Foradjusting the image contrast. Takes value ranging from0%(completely black), 100%(original image) and above 100% it willbe less contrast..drop-shadow(h-shadowv-shadow blur spread color)Forapplying drop shadow to an image.grayscale(%)Forconverting image to grayscale with 0% representing original ... Read More

The HTML DOM Style emptyCells property is used to specify how the empty cells of the table are displayed. By default, this property is set to show.Following is the syntax for −Setting the emptyCells property −empty-cells: show|hide|initial|inherit;Here, “show” displays the borders on empty cells while “hide” doesn’t. “Initial” sets it to default value and “inherit” inherits the parent property value.Let us look at an example for the emptyCells property −Example Live Demo    #TABLE1 {       font-style: italic;       empty-cells: hide;    }    table, td {       margin: 5px;     ... Read More

The HTML DOM Style display property is used for setting or returning the display type of an element. Elements are mostly block or inline. You can also hide the element using display:none.Following is the syntax for −Setting the display property −object.style.display = valueThe above property value is explained as follows −ValueDescriptioninlineFordisplaying the element as inline element i.e. the width and heightproperties will have no effect.blockTheblock element is displayed on new line and takes the whole width.contentsThisonly displays the child elements and make the parent elementdisappear making the child direct children of the DOM.flexDisplaysan element as a block-level flex containergridDisplaysan element ... Read More

The HTML DOM Style direction property is used to specify or returning the text direction. Its default value is ltr.Following is the syntax for −Setting the direction property −object.style.direction = "ltr|rtl|initial|inherit"The above property values are explained as follows −ValueDescriptionltrThisis the default value and text flows from left to right.rtlThetext flows from right to left.initialForsetting this property to initial value.inheritToinherit the parent property valueLet us look at an example for the direction property −Example Live Demo    div, span {       margin: 3px;       padding: 4px;    }    div{       height: 50px; ... Read More

The HTML DOM Style cursor property is used for setting or getting the cursor type while displaying the mouse pointer.Following is the syntax for −Setting the cursor property −object.style.cursor=valueThe following table demonstrates the valueValueDescriptionaliasThecursor indicates an alias of something is to be createdall-scrollThecursor indicates that something can be scrolled in any directionautoDefault.The browser sets a cursorcellThecursor indicates that a cell (or set of cells) may be selectedcontext-menuThecursor indicates that a context-menu is availablecol-resizeThecursor indicates that the column can be resized horizontallycopyThecursor indicates something is to be copiedcrosshairThecursor render as a crosshairdefaultThedefault cursore-resizeThecursor indicates that an edge of a box is ... Read More

The HTML DOM cssFloat property is used for setting or getting an element’s horizontal alignment. You can float the element either left or right −Following is the syntax for −Setting the cssFloat property −object.style.cssFloat = "left|right|none|initial|inherit"The above property values are explained as follows −ValueDescriptionNoneThisis the default value and doesn’t float the element.LeftThismakes the element float to the leftmost position of the parentelement.RightThismakes the element float to the rightmost position of the parentelement.InitialForsetting this property to initial value.InheritToinherit the parent property valueLet us look at an example for the cssFloat property −Example Live Demo    #DIV1 {     ... Read More

The HTML DOM Style counterReset property is used to reset a counter to a fixed value or to create one. This is used together with counterincrement property usually to increment or decrement a counter.Following is the syntax for −Setting the counterReset property −object.style.counterReset = "none|name number|initial|inherit"The above property values are explained as follows −ValueDescriptionnoneThisis the default value meaning no counters will be reset.nameItresets the counter with given name that should be resetidnumberItresets the counter given by id to the value given by the number oneach selector occurrence. Its default reset value is 0.initialForsetting this property to initial value.inheritToinherit the parent ... Read More

The HTML DOM Style counterIncrement property is used to increase or decrease the value of one or more CSS counter. This is used together with counterReset and content property usually.Following is the syntax for −Setting the counterIncrement property −object.style.counterIncrement = "none|id|initial|inherit"The above property values are explained as follows −ValueDescriptionnoneThisis the default value and the counters are not incremented.idnumberForincrementing the counter for the specific id by the given number.The default increment value is 1 and 0 or negative values are alsoallowed.initialForsetting this property to initial value.inheritToinherit the parent property valueLet us look at an example for the counterIncrement property −Example Live Demo ... Read More

The HTML DOM columnSpan property is used for specifying how an element spans across columns.Following is the syntax for −Setting the columnSpan property −object.style.columnSpan = "1|all|initial|inherit"The above property values are explained as follows −ValueDescription1Thismakes the element span exactly across one column and this is thedefault value.AllTheelement should span across all columnsInitialForsetting this property to initial value.InheritToinherit the parent property valueLet us look at an example for the columnSpan property −Example Live Demo    #DIV1{       column-count: 3;       background-color: papayawhip;    }    #P1{       background-color: lightcyan;       font-size: 1.4em; ... Read More