How to find the position of HTML elements in JavaScript ?

How to get font properties of particular element in JavaScript ?

Last Updated : 13 Jun, 2023

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:

How to find the position of HTML elements in JavaScript ?

P

PranchalKatiyar

Improve

Article Tags :

Similar Reads

How to find the position of HTML elements in JavaScript ?

In this article, we are given an HTML document and the task is to get the position of any element by using JavaScript. Use the following steps to get the position: Step 1: Selecting an element: Before finding the position, it is necessary to select the required HTML element. Every element in HTML is

How to Get Current Value of a CSS Property in JavaScript ?

In this article, we will see how to get the current value of a CSS property using JavaScript. Below are the approaches used to Get Current Value of a CSS Property in JavaScript: Table of Content Inline StyleUsing the getComputedStyle() methodApproach 1: Inline StyleInline styles are styles that are

How to get property descriptors of an object in JavaScript ?

Here, we are going to discuss the property descriptors of an Object in JavaScript. The Object.getOwnPropertyDescriptor() method returns an object describing a specific property on a given object. A JavaScript object can be created in many ways and its properties can be called by using property descr

JavaScript Get the text of a span element

We are given an HTML document and the task is to get the text of an <span> element. Below are the methods to get the text of a span element using JavaScript:Table of ContentHTML DOM textContent PropertyHTML DOM innerText PropertyHTML DOM textContent PropertyThis property set/return the text co

How to get the type of DOM element using JavaScript ?

The task is to get the type of DOM element by having its object reference. Here we are going to use JavaScript to solve the problem. Approach 1: First take the reference of the DOM object to a variable(Here, In this example an array is made of IDs of the element, then select random ID and select tha

How to get the width of device screen in JavaScript ?

Given an HTML document that is running on a device and the task is to find the width of the working screen device using JavaScript. Example 1: This example uses window.innerWidth to get the width of the device screen. The innerWidth property is used to return the width of the device. HTML<!DOCTYP

How to select DOM Elements in JavaScript ?

Selecting DOM (Document Object Model) elements is a fundamental aspect of web development with JavaScript. It allows developers to interact with and manipulate elements on a webpage dynamically. Proper selection of elements is crucial for tasks such as updating content, adding event listeners, or mo

How to get the text without HTML element using JavaScript ?

Given an HTML document containing some elements and the task is to get the text inside an HTML element using JavaScript. There are two methods to get the text without HTML element which are listed below: Using innerText propertyUsing textContent property Using innerText property: We can use innerTex

JavaScript - How to Get the Data Attributes of an Element?

Here are the various methods to get the data attributes of an element using JavaScript1. Using dataset PropertyThe dataset property in JavaScript allows you to access all data attributes of an HTML element as a DOMStringMap object. It simplifies retrieving, modifying, or interacting with custom data

How to get the Element's Actual Width and Height in JavaScript?

In JavaScript, it is often necessary to retrieve the actual width and height of an HTML element. This information can be useful in a variety of scenarios, such as setting the size of an element dynamically, centering an element on the page, or determining the size of an element for animation purpose