Home > Article > Web Front-end > How to use Screen object
How to use Screen object
- 不言Original
- 2019-01-29 16:11:113258browse
Javascript's Screen object can get information about the user's display and the number of color pixels available. It can be used to get information about the client's screen features, such as width, height, color depth, etc., below Let's take a closer look at the usage of the Screen object.
Let’s first take a look at the properties of the Screen object
screen.width: Returns the width of the screen.
screen.height: Returns the height of the screen.
screen.availWidth: Returns the available width.
screen.availHeight: Returns the available height.
screen.colorDepth: Returns the color depth.
screen.pixelDepth: Returns the pixel depth.
Next let’s look at the specific applications of these attributes
First look at the screen width and height
The screen.width property returns the user screen width in pixels.
The screen.height property returns the user screen height (in pixels).
The specific examples are as follows
<head>
<script type="text/javascript">
function GetDimensions () {
var scrWidth = document.getElementById ("scrWidth");
scrWidth.innerHTML = screen.width;
var scrHeight = document.getElementById ("scrHeight");
scrHeight.innerHTML = screen.height;
}
</script>
</head>
<body onload="GetDimensions ();">
<h3>屏幕尺寸:</h3>
Width: <span id="scrWidth"></span><br />
Height: <span id="scrHeight"></span><br />
</body>The running result is:
The available width and height of the screen
The screen.availWidth property returns the user screen width in pixels, excluding interface features. The screen.availHeight property returns the user screen height (in pixels), excluding interface functions. The example is as follows:<head>
<script type="text/javascript">
function GetDimensions () {
var availWidth = document.getElementById ("availWidth");
availWidth.innerHTML = screen.availWidth;
var availHeight = document.getElementById ("availHeight");
availHeight.innerHTML = screen.availHeight;
}
</script>
</head>
<body onload="GetDimensions ();">
<h3>可用面积尺寸:</h3>
Width: <span id="availWidth"></span><br />
Height: <span id="availHeight"></span><br />
</body>The running result is:
##Finally let’s take a look at
The screen.colorDepth property returns the number of bits (numbers) used to display a color.
The screen.pixelDepth property returns the pixel depth of the screen
The example is as follows
<head>
<script type="text/javascript">
function GetDimensions () {
var colorDepth =document.getElementById("colorDepth");
colorDepth.innerHTML = screen.colorDepth;
var pixelDepth =document.getElementById("pixelDepth");
pixelDepth.innerHTML = screen.pixelDepth;
}
</script>
</head>
<body onload="GetDimensions ();">
color:<span id="colorDepth"></span><br />
pixel:<span id="pixelDepth"></span>
</body>The running effect is as follows
This article The article ends here. For more exciting content, you can pay attention to other related column tutorials on the PHP Chinese website! ! !
The above is the detailed content of How to use Screen object. For more information, please follow other related articles on the PHP Chinese website!