JavaScript JavaScript BOM Window Screen

JavascriptFront End TechnologyObject Oriented Programming

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

The BOM window screen properties are −

PropertiesDescription
screen.widthReturn the user screen width in pixels.
screen.heightReturn the user screen height in pixels.
screen.availWidthReturns the user screen width in pixels without taking into account the interface features.
screen.availHeightReturns the user screen height in pixels without taking into account the interface features.
screen.colorDepthReturns the bits used to display one color
screen.pixelDepthRetrurns 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 −

raja
Published on 06-May-2020 15:38:33
Advertisements