HTML DOM Style font Property

HTMLWeb DevelopmentFront End Technology

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.font

Setting the font property −

Value
Description
style
Forsetting the font style.
variant
Forsetting the text in small-caps font.
weight
Forspecifying the boldness for the font.
size
Forspecifying the font size.
lineHeight
Forspecifying the distance between lines.
family
Forsetting the font face.
caption
Appliesfonts to caption controls e.g. button,drop-downs etc.
icon
Forspecifiying the label icon font.
menu
Thefont used in menus
message-box
Thefont used in dialog boxes
small-caption
Thefont used in small controls
status-bar
Setsthe window status bars font to current font.
initial
Forsetting this property to initial value.
inherit
Toinherit the parent property value.

Let us look at an example for the font property −

Example

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
   .PARA1{
      font: oblique 5deg small-caps bold 1.3em/3 cursive;
   }
</style>
<script>
   function changeFont() {
      for(var i=0;i<2;i++){
         document.getElementsByClassName("PARA1")[i].style.font="italic bold 30px Verdana ";
      }
      document.getElementById("Sample").innerHTML="The text in the above two paragraphs is now    changed";
   }
</script>
</head>
<body>
   <p class="PARA1">This is demo text</p>
   <p class="PARA1">This is another demo text</p>
   <p>Change the above container div flex direction by clicking the below button</p>
   <button onclick="changeFont()">Change Font</button>
   <p id="Sample"></p>
</body>
</html>

Output

On clicking the “Change Font” button −

On clicking the “Change Font” button −

raja
Published on 24-Oct-2019 08:05:06
Advertisements