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

How to get the width of device screen in JavaScript ?

Last Updated : 26 Jul, 2024

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

<!DOCTYPE html>
<html lang="en">

<head>
    <title>
        How to get the width of device 
        screen in JavaScript?
    </title>
</head>

<body style="text-align: center;">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>

    <h3>
        Click on Button to Get the 
        Width of Device's Screen
    </h3>

    <button onclick="GFG_Fun()">
        Click Here
    </button>

    <p id="GFG"></p>

    <!-- Script to display the device screen width -->
    <script>
        let elm = document.getElementById("GFG");

        function GFG_Fun() {
            let width = window.innerWidth;
            elm.innerHTML = width + " pixels";
        }
    </script>
</body>

</html>

Output:

Example 2: This example uses document.documentElement.clientWidth method to get the width of device screen.

html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>
        How to get the width of device
        screen in JavaScript?
    </title>
</head>

<body style="text-align: center;">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>

    <h3>
        Click on Button to Get the
        Width of Device's Screen
    </h3>

    <button onclick="GFG_Fun()">
        Click Here
    </button>

    <p id="GFG">
    </p>

    <!-- Script to display the device screen width -->
    <script>
        let elm = document.getElementById("GFG");

        function GFG_Fun() {
            elm.innerHTML = document.
                documentElement.clientWidth + " pixels";
        }
    </script>
</body>

</html>

Output:

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

P

PranchalKatiyar

Improve

Article Tags :

Similar Reads

How to get the height of device screen in JavaScript ?

Given an HTML document which is running on a device. The task is to find the height of the working screen device using JavaScript. Prerequisite - How to get the width of device screen in JavaScript ? Example 1: This example uses window.innerHeight property to get the height of the device screen. The

How to get the Width of Scroll bar using JavaScript?

Given an HTML document, the task is to get the width of the scrollbar using JavaScript. Approach:Create an element (div) containing a scrollbar.OffsetWidth defines the width of an element + scrollbar width.ClientWidth defines the width of an element.So scrollbar can be defined as width = offsetWidth

How to get the diagonal length of the device screen using JavaScript ?

Knowing the width and height of a browser window helps a web developer to enhancing the user experience. It can help in improving browser animations and the relative positioning of divisions and containers. Javascript provides a window object that represent an open browser window. It provides the va

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

How to Change Border Width of Div in JavaScript ?

Div elements are essential in creating modern web applications, and manipulating their properties dynamically can enhance user experience. In this article, we'll see how to change the border width of a div element using JavaScript. The border-width property in CSS is used to specify the width of the

How to set full-screen iframe with height 100% in JavaScript?

To set a full-screen iframe with a height of 100% in JavaScript, itâ€™s essential to manipulate the iframe's properties and styles dynamically. This process involves adjusting the iframe's dimensions to cover the entire viewport.Below are the approaches to set full-screen iframe:Table of ContentUsing

How to detect touch screen device using JavaScript?

Sometimes you might be looking for some features to include into your web-app that should only be available to devices with a touch screen. You may need this detection while introducing newer smarter controls for touch screen users in the game app or a GPS and navigation application. While there are

Calculate the width of the text in JavaScript

Calculating the width of text in JavaScript refers to determining the pixel width that a specific string of text will occupy when rendered in a browser. This is commonly done using the Canvas API or by creating a hidden element with similar styling to measure the text.Here we have some common approa

How to get the Width and Height of an Image using JavaScript?

Given an image and the task is to get the width and height of the image using JavaScript. The width and height property is used to display the image width and height. Syntax for width:let width = this.width;Syntax for height:let height = this.height;Example 1: This example selects the image and then

How to get the image size (height & width) using JavaScript?

To get the size of an image (height and width), Element.clientHeight and Element.clientWidth properties are used. Element.clientHeight: We can access the inner height of an element with this property. This height includes the padding but not the margin and border. Element.clientWidth: We can access