How to use Screen object-JS Tutorial-php.cn

How to use Screen object

不言

Release： 2019-01-29 16:58:09

Original

3367 people have browsed it

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.

How to use 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>

Copy after login

The running result is:

How to use Screen object

##Then let’s take a look

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>

Copy after login

The running result is:

How to use Screen object ##Finally let’s take a look at

Screen color and number of pixels

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>

Copy after login

The running effect is as follows

How to use Screen object 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!