The HTML DOM Style fontSizeAdjust property is used for setting the size of font based on the height of lowercase letter x and uppercase letter X. It offers a greater control on the font size than fontSize property.Note: This property is only supported in Mozilla Firefox.Following is the syntax for −Setting the fontSizeAdjust property −object.style.fontSizeAdjust = "none|number|initial|inherit"The above properties are explained as follows −ValueDescriptionnoneThisdoes no adjustment for font size and is the default value.numberItis used for calculating the aspect value ratio by dividing thefirst font size x-height by second one and multiplying that bygiven number.initialForsetting this property to initial value.inheritToinherit ... Read More

The HTML DOM Style fontSize property is used to set or return the size of font.Following is the syntax for −Setting the fontSize property −object.style.fontSize = "value|initial|inherit"The above properties are explained as follows −ValueDescriptionxx-smallx-smallsmallmediumlargex-largexx-largeForsetting the front size from one of value ranging from xx-small toxx-large.smallerItdecreases the text font-size by one relative unit.largerItincreases the text font-size by one relative unit.lengthFordefining the font-size in legal length units.%Itsets the child element font size relative to % of the parentelement font size.initialForsetting this property to initial value.inheritToinherit the parent property valueLet us look at an example for the fontSize property −Example Live Demo ... Read More

The HTML DOM Style font-family property is used for setting or returning the specific font list for the selected element. It is recommended to use web safe fonts and specifying additional fonts.Following is the syntax for −Setting the fontFamily property −object.style.fontFamily = "font1, font2, etc.|initial|inherit"Here, font1, font2 are comma separated font list. If the first font can’t be applied, then second one is applied and so on. Initial sets the property value to default value while inherit sets it to parent property value.Let us look at an example for the fontFamily property −Example Live Demo    li{   ... Read More

The HTML DOM Style font property is used for setting or getting the six properties named font-style, font-variant, font-weight, font-size, line-height, and font-family. The font size and font family are required attribute value and it can set default for all other missing values.Following is the syntax for returning the font property −object.style.fontSetting the font property −ValueDescriptionstyleForsetting the font style.variantForsetting the text in small-caps font.weightForspecifying the boldness for the font.sizeForspecifying the font size.lineHeightForspecifying the distance between lines.familyForsetting the font face.captionAppliesfonts to caption controls e.g. button, drop-downs etc.iconForspecifiying the label icon font.menuThefont used in menusmessage-boxThefont used in dialog boxessmall-captionThefont used in small ... Read More

The HTML DOM Style flexWrap property is used for specifying how the elements inside the flex element are wrapped.Following is the syntax for −Setting the flexWrap property −object.style.flexWrap = "nowrap|wrap|wrap-reverse|initial|inherit"The above properties are explained as follows −ValueDescriptionnowrapThisis the default value specifying that the flexible items will notwrap.wrapThisspecifies the flexible items will wrap if necessary.wrap-reverseWrapsthe flexible items if necessary but in reverse order.initialForsetting this property to initial value.inheritToinherit the parent property valueLet us look at an example for the flexWrap property −Example Live Demo    #demo {       margin: auto;       width: 180px;     ... Read More

The HTML DOM Style flexShrink property is used to set the proportion by which an element shrinks its size with respect to its siblings inside a flex element.Following is the syntax for −Setting the flexShrink property −object.style.flexShrink = "number|initial|inherit"Here, “number” specifies how much the element shrinks in proportion to other elements and its default value is 0. The “initial” sets the property value to the default value while “inherit” sets it to the parent property value.Let us look at an example for the flexShrink property −Example Live Demo    div {       margin: auto;     ... Read More

The HTML DOM Style flexGrow property is used to set the proportion by which an element accommodates its size inside a flex element. It accepts unitless numeric values.Following is the syntax for −Setting the flexGrow property −object.style.flexGrow = "number|initial|inherit"Here, number specifies how much the element grows in proportion to other elements and its default value is 0. Initial sets the property value to the default value while inherit sets it to the parent property value.Let us look at an example for the flexGrow property −Example Live Demo    #demo {       height: 100px;       ... Read More

The HTML DOM Style flexFlow property is used to specify the flexDirection and flexWrap property of an element. It is a shorthand for flexDirection and flexWrap and accepts values in the same order.Following is the syntax for −Setting the flexFlow property −object.style.flexFlow = "flex-direction flex-wrap|initial|inherit"The above properties are explained as follows −ValueDescriptionflex-directionItis used for specifying the flexible items direction and its valuesare row, row-reverse, column, column-reverse, initial and inherit.Its default value is row.flex-wrapIt is used for specifying ifthe flexible items should wrap or not. Its values are nowrap, wrap, wrap-reverse, initial, and inherit. Its default value isnowrap.initialFor setting this property ... Read More

The HTML DOM Style flexDirection property is used to set or return the direction of placement of flex elements.Following is the syntax for −Setting the flexDirection property −object.style.flexDirection = "row|row-reverse|column|column-reverse|initial|inherit"The above properties are explained as follows −ValueDescriptionrowThisdisplays the flex items as row horizontally and is the defaultvalue.row-reverseThisdisplays the flex items horizontally but in reverse order of row.columnDisplaysthe flex items as a column, vertically.column-reverseThisdisplays the flex items vertically but in reverse order of column.initialForsetting this property to initial value.inheritToinherit the parent property valueLet us look at an example for the flexDirection property −Example Live Demo    #demo {   ... Read More

The HTML DOM style flexBasis property is used to specifying the initial size of an element with flex display. The flexBasis property has higher priority than width for any other value than auto for flex-basis.Following is the syntax for −Setting the flexBasis property −object.style.flexBasis = "number|auto|initial|inherit"The above properties are explained as follows −ValueDescriptionnumberForspecifying the flexible items initial length in percentage or anylegal length unit.autoThesets the length equal to the flexible item length. If the lengthisn’t specified then it will be according to its content. Thisis the default value.initialForsetting this property to initial value.inheritToinherit the parent property valueLet us look at ... Read More