Get the size of the screen, current web page and browser window using jQuery
From https://www.geeksforgeeks.org/how-to-get-the-size-of-screen-current-web-page-and-browser-window-using-jquery/
< !DOCTYPE html>
< head>
< title>
Get the size of the screen, current web page and browser window using jQuery?
< /title>
< script src= "https://code.jquery.com/jquery-2.2.4.min.js"> < /script>
< /head>
< body>
< h1 style="color: green"> GeeksforGeeks
< b>
How to get the size of the screen,
current web page and browser
window using jQuery?
< /b>
< p>Window Height is: < span class="windowHeight">< /span > < /p >
< p>Windows Width is: < span class="windowWidth">< /span > < /p >
< p>Document Height is: < span class="documentHeight">< /span > < /p >
< p>Document Width is: < span class="documentWidth">< /span > < /p >
< p>Screen Height is: < span class="screenHeight">< /span> < /p >
< p>Screen Width is: < span class="screenWidth">< /span> < /p >
< button id="btn"> Click Here to check the dimensions of the page: < /button>
< script type="text/javascript" >
$("#btn").on("click", function () {
windowHeight = $(window).height();
windowWidth = $(window).width();
documentHeight = $(document).height();
documentWidth = $(document).width();
screenHeight = screen.height;
screenWidth = screen.width;
document.querySelector('.windowHeight').textContent = windowHeight;
document.querySelector('.windowWidth').textContent = windowWidth;
document.querySelector('.documentHeight').textContent = documentHeight;
document.querySelector('.documentWidth').textContent = documentWidth;
document.querySelector('.screenHeight').textContent = screenHeight;
document.querySelector('.screenWidth').textContent = screenWidth;
});
< /script >
< /body>
< /html>
< head>
< title>
Get the size of the screen, current web page and browser window using jQuery?
< /title>
< script src= "https://code.jquery.com/jquery-2.2.4.min.js"> < /script>
< /head>
< body>
< h1 style="color: green"> GeeksforGeeks
< b>
How to get the size of the screen,
current web page and browser
window using jQuery?
< /b>
< p>Window Height is: < span class="windowHeight">< /span > < /p >
< p>Windows Width is: < span class="windowWidth">< /span > < /p >
< p>Document Height is: < span class="documentHeight">< /span > < /p >
< p>Document Width is: < span class="documentWidth">< /span > < /p >
< p>Screen Height is: < span class="screenHeight">< /span> < /p >
< p>Screen Width is: < span class="screenWidth">< /span> < /p >
< button id="btn"> Click Here to check the dimensions of the page: < /button>
< script type="text/javascript" >
$("#btn").on("click", function () {
windowHeight = $(window).height();
windowWidth = $(window).width();
documentHeight = $(document).height();
documentWidth = $(document).width();
screenHeight = screen.height;
screenWidth = screen.width;
document.querySelector('.windowHeight').textContent = windowHeight;
document.querySelector('.windowWidth').textContent = windowWidth;
document.querySelector('.documentHeight').textContent = documentHeight;
document.querySelector('.documentWidth').textContent = documentWidth;
document.querySelector('.screenHeight').textContent = screenHeight;
document.querySelector('.screenWidth').textContent = screenWidth;
});
< /script >
< /body>
< /html>
Views 138 Downloads 32