How to get font properties of particular element in JavaScript ?
Given a string element and the task is to get the font properties of a particular element using JavaScript.
Approach:
- Store a string to the variable.
- Then use element.style.property to get the propertyValue of that element.
Example 1: This example gets the font-family of the element [id = ‘GFG’].
html
<!DOCTYPE html>
< html lang = "en" >
< head >
< title >
How to get font properties of
particular element in JavaScript ?
</ title >
</ head >
< body style = "text-align: center;" >
< h1 style = "color:green;" >
GeeksforGeeks
</ h1 >
< h3 id = "GFG" style = "font-family: sans-serif;" >
How to get font properties of
particular element in JavaScript ?
</ h3 >
< button onclick = "GFG_Fun()" >
Click Here
</ button >
< p id = "GFG_Res" ></ p >
< script >
let elm1 = document.getElementById("GFG");
let elm2 = document.getElementById("GFG_Res");
function GFG_Fun() {
elm2.innerHTML =
"Font-style Property: '"
+ elm1.style.fontFamily + "'";
}
</ script >
</ body >
</ html >
|
Output:
Example 2: This example gets the font-weight of the element [id = ‘GFG’].
html
<!DOCTYPE html>
< html lang = "en" >
< head >
< title >
How to get font properties of
particular element in JavaScript ?
</ title >
</ head >
< body style = "text-align: center;" >
< h1 style = "color:green;" >
GeeksforGeeks
</ h1 >
< h3 id = "GFG" style = "font-weight: bold;" >
How to get font properties of
particular element in JavaScript ?
</ h3 >
< button onclick = "GFG_Fun()" >
Click Here
</ button >
< p id = "GFG_Res" ></ p >
< script >
let elm1 = document.getElementById("GFG");
let elm2 = document.getElementById("GFG_Res");
function GFG_Fun() {
elm2.innerHTML =
"Font-weight Property: '"
+ elm1.style.fontWeight + "'";
}
</ script >
</ body >
</ html >
|
Output:
Last Updated :
13 Jun, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...