JavaScript BOM Window Screen

The JavaScript BOM Window screen contains the information about the client's screen.

The BOM window screen properties are ?

Properties Description
screen.width Return the user screen width in pixels.
screen.height Return the user screen height in pixels.
screen.availWidth Returns the user screen width in pixels without taking into account the interface features.
screen.availHeight Returns the user screen height in pixels without taking into account the interface features.
screen.colorDepth Returns the bits used to display one color
screen.pixelDepth Retrurns the screen pixel depth

Following is the code for the JavaScript BOM Window screen ?

Example

 Live Demo

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
   font-size: 18px;
   font-weight: 500;
   color: blueviolet;
}
</style>
</head>
<body>
<h1>JavaScript BOM Window Screen</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to get information about your screen</h3>
<script>
let resultEle = document.querySelector(".result");
document.querySelector(".Btn").addEventListener("click", () => {
   resultEle.innerHTML = 'screen.width = '+screen.width+'<br>';
   resultEle.innerHTML += 'screen.height = '+screen.height+'<br>';
   resultEle.innerHTML += 'screen.availWidth = '+screen.availWidth+'<br>';
   resultEle.innerHTML += 'screen.availHeight = '+screen.availHeight+'<br>';
   resultEle.innerHTML += 'screen.colorDepth = '+screen.colorDepth+'<br>';
   resultEle.innerHTML += 'screen.pixelDepth = '+screen.pixelDepth+'<br>';
});
</script>
</body>
</html>

Output

On clicking the ?CLICK HERE' button ?

Updated on: 2022-12-28T14:36:08+05:30

450 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements