HTML DOM Screen用法及代碼示例

HTML DOM 中的 Screen 對象用於檢索有關訪問者的信息； s 或客戶端屏幕。例如屏幕的高度和寬度以及客戶端屏幕的顏色分辨率。

筆記：沒有適用於屏幕對象的公共標準。

屏幕對象有一些屬性：

availHeight: 它用於返回客戶端屏幕的高度，但不包括窗口任務欄。
availWidth: 它用於返回客戶端屏幕的寬度，但不包括 Windows 任務欄。
colorDepth: 它用於返回顯示圖像的調色板的位深度(以每像素位數為單位)。
Height: 它用於返回訪問者屏幕的整個高度。
pixelDepth: 它用於返回訪客屏幕的顏色分辨率。
width: 它用於返回訪問者屏幕的整個寬度。

例子：下麵的 HTML 代碼返回訪問者屏幕的高度和寬度。

HTML


<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Returning the Screen height  
        and width Property in HTML 
    </title> 
  
    <style> 
        h1 { 
            color: green; 
        } 
  
        h2 { 
            font-family: Impact; 
        } 
  
        body { 
            text-align: center; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
  
    <h2> 
        Returning the Screen height and  
        width Property in HTML 
    </h2> 
      
    <p> 
        For checking the screen's total height, 
        double click the "Check Height" button: 
    </p> 
  
    <br> 
    <p> 
        For checking the screen's total width, 
        double click the "Check width" button: 
    </p> 
  
    <button ondblclick="check_height()"> 
        Check Height 
    </button> 
  
    <button ondblclick="check_width()"> 
        Check width 
    </button> 
      
    <p id="height"></p> 
  
    <script> 
        function check_height() { 
            var h = "Total Screen Height In Pixels : " 
                + screen.height; 
  
            document.getElementById("height").innerHTML = h; 
        } 
  
        function check_width() { 
            var w = "Total Screen width In Pixels : " 
                + screen.width; 
                  
            document.getElementById("height").innerHTML = w; 
        } 
    </script> 
</body> 
  
</html>

輸出：

示例 2：下麵的 HTML 代碼返回 PixelDepth 屬性。

HTML


<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        HTML DOM Screen Object 
    </title> 
      
    <style> 
        h1 { 
            color: green; 
        } 
  
        h2 { 
            font-family: Impact; 
        } 
  
        body { 
            text-align: center; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
  
    <h2>HTML DOM Screen Object</h2> 
      
    <p> 
        For checking the screen's pixel depth, 
        click the "submit" button: 
    </p> 
  
    <button onclick="check_pixel_depth()"> 
        Submit 
    </button> 
  
    <p id="geeks"></p> 
  
    <script> 
        function check_pixel_depth() { 
            var r = "Pixel depth in bits per pixel : " 
                + screen.pixelDepth; 
                  
            document.getElementById("geeks").innerHTML = r; 
        } 
    </script> 
</body> 
  
</html>

輸出：

支持的瀏覽器：

穀歌瀏覽器
IE瀏覽器
Firefox
蘋果瀏覽器
迷你 Opera

相關用法

注：本文由純淨天空篩選整理自ManasChhabra2大神的英文原創作品 HTML DOM Screen Object。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。