目錄
屏幕尺寸:
可用面积尺寸:
首頁 web前端 js教程 Screen物件怎麼使用

Screen物件怎麼使用

Jan 29, 2019 pm 04:11 PM

Javascript的Screen物件可以獲得有關用戶顯示的資訊以及可用的顏色像素數,它可以用於獲取有關客戶端螢幕功能的信息,如寬度, 高度,顏色深度等,下面我們就來具體看看Screen物件的用法。

Screen物件怎麼使用

我們先來看看Screen物件的屬性

screen.width:傳回螢幕的寬度。

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

screen.availWidth:傳回可用的寬度。

screen.availHeight:傳回可用高度。

screen.colorDepth:回傳顏色深度。

screen.pixelDepth:傳回像素深度。

接下來我們來看這些屬性的具體應用

#先來看一下螢幕寬高

# screen.width屬性傳回使用者螢幕寬度(以像素為單位)。 Screen物件怎麼使用

 screen.height屬性傳回使用者螢幕高度(以像素為單位)。

具體範例如下

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<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 id="屏幕尺寸">屏幕尺寸:</h3>

    Width: <span id="scrWidth"></span><br />

    Height: <span id="scrHeight"></span><br />

</body>

登入後複製

運行結果為:

#接著我們來看

螢幕可用寬高

screen.availWidth屬性傳回使用者螢幕寬度(以像素為單位),不包含介面功能。 Screen物件怎麼使用

 screen.availHeight屬性傳回使用者螢幕高度(以像素為單位),不包含介面功能。

範例如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<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 id="可用面积尺寸">可用面积尺寸:</h3>

    Width: <span id="availWidth"></span><br />

    Height: <span id="availHeight"></span><br />

</body>

登入後複製

運行結果為:

#最後我們來看

螢幕顏色和像素數

screen.colorDepth屬性傳回用於顯示一種顏色的位元(數字)。 Screen物件怎麼使用

 screen.pixelDepth屬性傳回畫面的像素深度

範例如下

1

2

3

4

5

6

7

8

9

10

11

12

13

14

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

登入後複製

運作效果如下###############本篇文章到這裡就全部結束了,更多精彩內容大家可以關注php中文網的其他相關欄位教學! ! ! ###### ###

以上是Screen物件怎麼使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

在JavaScript中替換字符串字符 在JavaScript中替換字符串字符 Mar 11, 2025 am 12:07 AM

在JavaScript中替換字符串字符

jQuery獲取元素填充/保證金 jQuery獲取元素填充/保證金 Mar 01, 2025 am 08:53 AM

jQuery獲取元素填充/保證金

jQuery檢查日期是否有效 jQuery檢查日期是否有效 Mar 01, 2025 am 08:51 AM

jQuery檢查日期是否有效

10個jQuery手風琴選項卡 10個jQuery手風琴選項卡 Mar 01, 2025 am 01:34 AM

10個jQuery手風琴選項卡

10值得檢查jQuery插件 10值得檢查jQuery插件 Mar 01, 2025 am 01:29 AM

10值得檢查jQuery插件

HTTP與節點和HTTP-Console調試 HTTP與節點和HTTP-Console調試 Mar 01, 2025 am 01:37 AM

HTTP與節點和HTTP-Console調試

自定義Google搜索API設置教程 自定義Google搜索API設置教程 Mar 04, 2025 am 01:06 AM

自定義Google搜索API設置教程

jQuery添加捲軸到Div jQuery添加捲軸到Div Mar 01, 2025 am 01:30 AM

jQuery添加捲軸到Div

See all articles