The HTML DOM Style listStyleImage property is used for setting or returning an image as a list item marker.Following is the syntax for −Setting the listStyleImage property −object.style.listStyleImage = "none|url|initial|inherit"The above properties are explained as follows −ValueDescriptionnoneThisis the default value and displays no image.urlForspecifying the image path.initialForsetting this property to initial value.inheritToinherit the parent property valueLet us look at an example for the listStyleImage property −Example Live Demo    function changeListImage() {       document.getElementById("LIST1").style.listStyleImage =          "url('https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Red_circle.svg/10px-   Red_circle.svg.png')";    document.getElementById("Sample").innerHTML=" The list marker has been replaced by a red circle    image"; ... Read More

The HTML DOM Style listStyle property is used for setting or returning the three properties named list-style-type, list-style-position and list-style-image.Following is the syntax for −Setting the listStyle property −object.style.listStyle = "type position image|initial|inherit"The above properties are explained as follows −ParameterDescriptiontypeFordefining the list-item marker type.positionForsetting the list-item marker positionsimageForspecifying the image set as list-item marker.initialForsetting this property to initial value.inheritToinherit the parent property valueLet us look at an example for the listStyle property −Example Live Demo    function changeListStyle() {       document.getElementById("LIST1").style.listStyle = "upper-roman";       document.getElementById("Sample").innerHTML="The list style has been changed to upper Roman";   ... Read More

The HTML DOM Style letterSpacing property is used for setting or getting the characters space between text.Following is the syntax for −Setting the letterSpacing property −object.style.letterSpacing = "normal|length|initial|inherit"The above properties are explained as follows −ValueDescriptionnormalThisis the default property and sets the character space to normal.lengthForspecifying the character space in length units and negative valuesare also allowed.initialForsetting this property to initial value.inheritToinherit the parent property valueLet us look at an example for the letterSpacing property:Example Live Demo    function changeSpacing() {       document.getElementById("myP").style.letterSpacing = "12px";       document.getElementById("Sample").innerHTML = "The space between characters is now increased"; ... Read More

The HTML DOM Style left property is used for setting the or returning a positioned element left position. To position an element, you have to set its position property to relative, absolute or fixed.Following is the syntax for −Setting the left property −object.style.left = "auto|length|%|initial|inherit"The above properties are explained as follows −ValueDescriptionautoThisis default position and sets the browser to left position.lengthThisis for defining the left position in length units. It allowsnegative values.%Forsetting the left position of the child in % relative to the widthof the parent element.initialForsetting this property to initial value.inheritToinherit the parent property valueLet us look at an ... Read More

The HTML DOM justifyContent property is used for aligning flex items horizontally on the main axis when it doesn’t take all the available space.Following is the syntax for −Setting the justifyContent property −object.style.justifyContent = "flex-start|flex-end|center|space-between|space-around|initial|inherit"The above properties are explained as follows −ValueDescriptionflex-startThispositions the items at the container beginning and is the defaultvalue.flex-endThispositions the items at the container end.centerThispositions the items at container center.space-betweenThispositions the items with space between the lines.space-aroundThispositions the items with space between, before and after thelines.initialForsetting this property to initial value.inheritToinherit the parent property valueLet us look at an example for the justifyContent property −Example Live Demo ... Read More

The HTML DOM style isolation property is for defining if the element must create a new stacking content or not. This property is mainly used for preventing the element from blending in the background by creating a separate stack element.Following is the syntax for −Setting the isolation property −object.style.isolation = "auto|isolate|initial|inherit"The above properties are explained as follows −ValueDescriptionautoThisis default property for setting the height.lengthThisis for defining the height in length units.%Fordefining the height relative to parent element in percentage.initialForsetting this property to initial value.inheritToinherit the parent property valueLet us look at an example for the isolation property −Example Live Demo ... Read More

The HTML DOM Style height property is used for setting or returning the height of an element.Following is the syntax for −Setting the height property −object.style.height = "auto|length|%|initial|inherit"The above properties are explained as follows −ValueDescriptionAutoThisis the default value and the height set by the browser.LengthForsetting the browser height in length units.%Setsthe child element height in relative percentage to its parentelement.initialForsetting this property to initial value.inheritToinherit the parent property valueLet us look at an example for the height property −Example Live Demo    #demo1 {       width:100px;       height:100px;       background-color:lightpink;    } ... Read More

The HTML DOM fontWeight property is used for setting or returning the thickness of text characters of an element.Following is the syntax for −Setting the fontWeight property −object.style.fontWeight = "normal|lighter|bold|bolder|value|initial|inherit"The above properties are explained as followsValueDescriptionnormalThisis the default and doesn’t make any changes to font.lighterFontis lighterboldSetsthe font to bold which is thicker than lighter.bolderSetsthe font to bolder which is thicker than bold.100200300400500600700800900Givesa range of values depicting light to bold characters. Normal=400, 700=Bold.initialForsetting this property to initial value.inheritToinherit the parent property valueLet us look at an example for the fontWeight property −Example Live Demo    #demo2, #demo1 {   ... Read More

The HTML DOM Style fontVariant property is used for setting or returning if the font should be converted to small caps or not. In small caps all the lowercase letters are converted to uppercase with their size same as lowercase letters. Uppercase letters remain unaffected.Following is the syntax for −Setting the fontVariant property −object.style.fontVariant = "normal|small-caps|initial|inherit"The above property values are explained as follows −ValueDescriptionnormalThefont is set to normal and this is the default value.small-capsItdisplays the form in small capital letters.initialForsetting this property to initial value.inheritToinherit the parent property valueLet us look at an example for the fontVariant propert −Example Live Demo ... Read More

The HTML DOM Style fontStyle property is used for setting or returning the font style of the text. It is used to specify normal, italic or oblique style for an element’s text.Following is the syntax for −Setting the fontStyle property −object.style.fontStyle = "normal|italic|oblique|initial|inherit"Let us look at an example for the fontStyle property −Example Live Demo    #demo2, #demo1 {       font-family: 'times new roman';       font-size: 25px;    }    function changeFontStyle() {       document.getElementById("demo1").style.fontStyle="italic";       document.getElementById("demo2").style.fontStyle="italic";       document.getElementById("Sample").innerHTML="The font style has been changed for the ... Read More