- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML Screen availWidth Property
The HTML Screen availWidth property returns the available width of the user’s screen that means it excludes interface features of the browser.
Syntax
Following is the syntax −
screen.availWidth
Example
Let us see an example of HTML Screen availWidth Property −
<!DOCTYPE html> <html> <style> body { color: #000; height: 100vh; background-color: #FBAB7E; background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%); text-align: center; } .btn { background: #db133a; border: none; height: 2rem; border-radius: 2px; width: 40%; display: block; color: #fff; outline: none; cursor: pointer; margin: 1rem auto; } .show { font-size: 1.2rem; margin: 1rem auto; font-weight: bold; font-family: sans-serif; } </style> <body> <h1>HTML screen availWidth Property</h1> <button class="btn" onclick="get()">Show availWidth Value</button> <div class="show"></div> <script> function get() { document.querySelector(".show").innerHTML = "Available Width is " + screen.availWidth + " px"; } </script> </body> </html>
Output
Click on “Show availWidth value” button to display the value of availWidth property −
Advertisements