How to get font properties of particular element in JavaScript ?
Give 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 property.
Example 1: This example gets the font-family of the element [id = ‘GFG_UP’].
<!DOCTYPE HTML> < html > < head > < title > How to get the font family property of a particular element in JavaScript ? </ title > </ head > < body style = "text-align:center;" > < h1 style = "color:green;" > GeeksForGeeks </ h1 > < p id = "GFG_UP" style = "font-size: 16px; font-family: sans-serif; font-weight: bold;" > </ p > < button onclick = "gfg_Run()" > Click here </ button > < p id = "GFG_DOWN" style = "color:green; font-size: 30px; font-weight: bold;" > </ p > < script > var el_up = document.getElementById("GFG_UP"); var el_down = document.getElementById("GFG_DOWN"); var str = "click on button to get the font property"; el_up.innerHTML = str; function gfg_Run() { el_down.innerHTML = "font-style is '" + el_up.style.fontFamily + "'"; } </ script > </ body > </ html > |
chevron_right
filter_none
Output:
-
Before clicking on the button:
-
After clicking on the button:
Example 2: This example gets the font-weight of the element [id = ‘GFG_UP’].
<!DOCTYPE HTML> < html > < head > < title > How to get the font weight property of a particular element in JavaScript ? </ title > </ head > < body style = "text-align:center;" > < h1 style = "color:green;" > GeeksForGeeks </ h1 > < p id = "GFG_UP" style = "font-size: 16px; font-family: sans-serif; font-weight: bold;" > </ p > < button onclick = "gfg_Run()" > Click here </ button > < p id = "GFG_DOWN" style = "color:green; font-size: 30px; font-weight: bold;" > </ p > < script > var el_up = document.getElementById("GFG_UP"); var el_down = document.getElementById("GFG_DOWN"); var str = "click on button to get the font property"; el_up.innerHTML = str; function gfg_Run() { el_down.innerHTML = "font-weight is '"+el_up.style.fontWeight + "'"; } </ script > </ body > </ html > |
chevron_right
filter_none
Output:
-
Before clicking on the button:
-
After clicking on the button:
Recommended Posts:
- JavaScript | Object Properties
- How to get a subset of a javascript object's properties?
- JavaScript | Window innerWidth and innerHeight Properties
- How to merge properties of two JavaScript objects dynamically?
- How to set font size based on window size using JavaScript ?
- How to get the type of DOM element using JavaScript?
- How to add a class to DOM element in JavaScript?
- How to set the value of a select box element using JavaScript?
- Print the content of a div element using JavaScript
- How to append data to <div> element using JavaScript ?
- Find the min/max element of an Array using JavaScript
- How to append an element in an array in JavaScript?
- How to swap key and value of JSON element using JavaScript ?
- JavaScript | Get the text of a span element
- How to get the child element of a parent using JavaScript ?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.