ywork2020.com

Title

画面の色深度を取得する

目次 (INDEX)

screen.colorDepth とは

ここで説明する screen とは次の語句からなる JavaScript のプロパティであり、Screen オブジェクトを参照します。 これは Window オブジェクト のプロパティですので、グローバルプロパティとして解釈されます。
screen
読み: スクリーン
意味: 画面、スライドなどを映して見るための白い幕、間仕切り
ここで説明する colorDepth とは次の語句からなる JavaScript のプロパティです。
color depth
読み: カラーデプス
意味: 色深度

目次に戻る

screen.colorDepth プロパティの概要

このプロパティは、画面 ( ディスプレイ ) の色深度を bit ( ビット ) 単位で取得します。

色深度とは、画面の画素が表示可能な色数のことを言い、1 ビットでは白と黒の 2 色しか表示できませんが、 例えば 24ビットでは 16777216 色、32ビットでは 4294967296 色もの表示ができます。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

var bitColorDepth = window.screen.colorDepth;

目次に戻る

サンプルコードと実行結果

ここでは、screen.colorDepth を使って、この画面の色深度を取得して表示します。

サンプルコード: HTML
<body>
	<output id="idOutput"> innerText </output>
	<script>...</script>
</body>
  • 02: output id="idOutput" (この要素のコンテンツに結果を表示します。)
サンプルコード: script
<script>
	let bitDepth = screen.colorDepth;
	let numColors = Math.pow(2, bitDepth);
	let elmOutput = document.getElementById("idOutput");
	elmOutput.innerText = bitDepth + " bit : " + numColors + " 色";
</script>
  • 02: screen.colorDepth (この画面の色深度を bitDepth という変数に代入しています。)
  • 03: Math.pow(2, bitDepth) (画素が表示できる色の数を計算しています。1 ビットで 2 色 なので基数を 2 として、また指数を ビット数として「べき乗」しています。 ここでは、pow() を使用しましたが、演算子を使って 2**bitDepth と計算するのと同じです。)
実行結果:
innerText

目次に戻る