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
<!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 −
