如何在JavaScript中返回顯示視窗螢幕上一種顏色所用的位數？

在本教程中，我們將探討如何使用JavaScript查詢裝置螢幕上顯示單一顏色所用的位數。JavaScript內建了許多函式，允許我們獲取顯示屏各種屬性的資訊。我們將使用其中一個函式來完成上述任務。

如上一節所述，我們希望使用JavaScript找出使用者顯示螢幕上顯示特定顏色所用的確切位數。在我們能夠訪問螢幕上特定顏色所用的位數之前，我們應該瞭解JavaScript中的window物件。

JavaScript中的window物件代表任何使用者的完整瀏覽器視窗。此物件具有與使用者顯示視窗相關的各種屬性，例如其高度、寬度等等。我們本文關注的屬性是screen屬性，它是另一個物件，引用特定視窗的實際顯示螢幕。

因此，window.screen物件為我們提供了有關使用者顯示螢幕的完整資訊。我們可以使用此物件來查詢有關使用者顯示螢幕的各種資訊。其中一項就是螢幕上顯示顏色所需的位數。此屬性稱為顏色深度。更正式地說，顏色深度是在螢幕上顯示一個彩色畫素所需的位數。

因此，透過使用此屬性，我們可以找出視窗顯示螢幕上表示顏色所需的位數。

讓我們看一下JavaScript中顏色深度屬性的語法。

語法

訪問顏色深度屬性的語法為：

window.screen.colorDepth;

或者，如果我們刪除window，命令仍然有效。這是因為window物件位於作用域鏈的根部，因此如果命令中沒有提及它，則會被預設包含。因此，相同的另一種語法是：

screen.colorDepth;

這裡，window指的是使用者瀏覽器的視窗物件。此物件具有名為screen的屬性，它指的是表示使用者顯示螢幕及其元件和屬性的物件。colorDepth屬性是screen物件的此類屬性之一，它告訴我們螢幕上表示顏色所需的位數。

此命令本質上將返回一個整數，表示特定使用者顯示螢幕的顏色深度。

示例1

讓我們看一下如何透過程式碼實現這一點。

<!DOCTYPE html>
<html>
<body>
   <script>
      document.write("Window screen width: " + window.screen.width);
      document.write("<br>Window screen height: " + window.screen.height);
      document.write("<br>Window color Depth: " + window.screen.colorDepth);
   </script>
</body>
</html>

在上面的程式碼中，我們使用了Javascript中screen物件的colorDepth屬性來查詢視窗螢幕上表示顏色所需的位數。

示例2

同樣，正如我們上面討論的那樣，它也可以在不使用window關鍵字的情況下使用，讓我們用一個例子來說明這一點。

<!DOCTYPE html>
<html>
<body>
   <script>
      document.write("Screen width: " + screen.width);
      document.write("<br>Screen height: " + screen.height);
      document.write("<br>Color Depth: " + screen.colorDepth);
   </script>
</body>
</html>

結論

在本教程中，我們瞭解瞭如何使用JavaScript查詢裝置螢幕上顯示單一顏色所用的位數。這是透過使用JavaScript中screen物件的colorDepth屬性實現的，該屬性返回視窗螢幕上表示顏色所需的位數。

更新於：2022年11月7日

瀏覽量：143

開啟你的職業生涯

完成課程獲得認證

開始學習
廣告