• 技术文章 >web前端 >js教程

    Screen对象怎么使用

    不言不言2019-01-29 16:58:09原创1798
    Javascript的Screen对象可以获取有关用户显示的信息以及可用的颜色像素数,它可以用于获取有关客户端屏幕功能的信息,如宽度, 高度,颜色深度等,下面我们就来具体看看Screen对象的用法。

    JavaScript

    我们先来看一下Screen对象的属性

    screen.width:返回屏幕的宽度。

    screen.height:返回屏幕的高度。

    screen.availWidth:返回可用的宽度。

    screen.availHeight:返回可用高度。

    screen.colorDepth:返回颜色深度。

    screen.pixelDepth:返回像素深度。

    接下来我们来看这些属性的具体应用

    先来看一下屏幕宽高

    screen.width属性返回用户屏幕宽度(以像素为单位)。

    screen.height属性返回用户屏幕高度(以像素为单位)。

    具体示例如下

    <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>

    运行结果为:

    微信截图_20190129155653.png

    接着我们来看一下屏幕可用宽高

    screen.availWidth属性返回用户屏幕宽度(以像素为单位),不包括界面功能。

    screen.availHeight属性返回用户屏幕高度(以像素为单位),不包括界面功能。

    示例如下:

    <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>

    运行结果为:

    微信截图_20190129160122.png

    最后我们来看一下屏幕颜色和像素数

    screen.colorDepth属性返回用于显示一种颜色的位(数字)。

    screen.pixelDepth属性返回屏幕的像素深度

    示例如下

    <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>

    运行效果如下

    微信截图_20190129160349.png

    本篇文章到这里就全部结束了,更多精彩内容大家可以关注php中文网的其他相关栏目教程!!!

    以上就是Screen对象怎么使用的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:Screen对象
    上一篇:slice方法怎么使用 下一篇:JavaScript中substr()方法和substring()方法的区别
    Web大前端开发直播班

    相关文章推荐

    • 详解WordPress开发中get_current_screen()函数的使用_javascript技巧• javascript full screen 全屏显示页面元素的方法_javascript技巧• 详解JavaScript编程中的window与window.screen对象• HTML5 video播放器全屏(fullScreen)实现的方法

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网