The HTML DOM Style’s font property is used to change the element’s font properties. It can be used to change the font style, weight, size, and family.
Syntax:
- To set the font style :
node.style.font = "font-properties font-size font-family;"
- To get the current font style:
node.style.font;
Return Values: It returns a string value, which represents different font properties of the element
Property value: It is a string which has values like font properties, font size, and font family. The properties are required in the following order :
- Font style
- Font variant
- Font weight
- Font size
- Font height
- Font family
Approach: We have a paragraph element with and ID of text. We created a function in JavaScript that takes in a string value in variable gfg as a parameter and sets the ‘text‘ ID element’s style.font property to ‘gfg‘. We call this function from the buttons, and supply property values appropriately.
Example:
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML DOM | Style font property</title>
</head>
<body>
<p id='text'>Welcome to GeeksForGeeks</p>
<button onclick=
"changeFont('italic 20px arial')">
Italic, Arial, 20px
</button>
<button onclick=
"changeFont('bold 26px serif')">
Bold, Serif, 26px
</button>
<button onclick=
"changeFont('italic bold 30px Montserrat')">
Italic, Montserrat, 20px
</button>
<button onclick="changeFont('900 34px hack')">
Weight 900, Hack, 34px
</button>
<script type="text/javascript">
function changeFont(gfg) {
// Get font style.
document.getElementById(
'text').style.font = gfg;
}
</script>
</body>
</html>
|
Output:
- Google Chrome 1 and above
- Internet Explorer 3 and above
- Edge 12 and above
- Firefox 1 and above
- Opera 3.5 and above
- Safari 1 and above