JavaScript Screen对象
精华
小牛编辑
127浏览
2023-03-14
JavaScript screen 对象中包含了有关计算机屏幕的信息,例如分辨率、宽度、高度等,我们可以通过 window 对象的 screen 属性来获取它。由于 window 对象是一个全局对象,因此在使用
示例代码如下:
图1:获取屏幕的宽度和高度
图2:获取屏幕的颜色深度
window.screen
时可以省略 window 前缀,例如
window.screen.width
可以简写为
screen.width
。
screen 对象中的属性
下表中列举了 JavaScript screen 对象中常用的属性及其描述:属性 | 说明 |
---|---|
availTop | 返回屏幕上方边界的第一个像素点(大多数情况下返回 0) |
availLeft | 返回屏幕左边边界的第一个像素点(大多数情况下返回 0) |
availHeight | 返回屏幕的高度(不包括 Windows 任务栏) |
availWidth | 返回屏幕的宽度(不包括 Windows 任务栏) |
colorDepth | 返回屏幕的颜色深度(color depth),根据 CSSOM(CSS 对象模型)视图,为兼容起见,该值总为 24。 |
height | 返回屏幕的完整高度 |
pixelDepth | 返回屏幕的位深度/色彩深度(bit depth),根据 CSSOM(CSS 对象模型)视图,为兼容起见,该值总为 24 |
width | 返回屏幕的完整宽度 |
orientation | 返回当前屏幕的方向 |
示例代码如下:
document.write(screen.availTop + "<br>"); // 输出:0 document.write(screen.availLeft + "<br>"); // 输出:0 document.write(screen.availHeight + "<br>");// 输出:1050 document.write(screen.availWidth + "<br>"); // 输出:1920 document.write(screen.height + "<br>"); // 输出:1080 document.write(screen.width + "<br>"); // 输出:1920 document.write(screen.colorDepth + "<br>"); // 输出:24 document.write(screen.pixelDepth + "<br>"); // 输出:24 console.log(screen.orientation); // 输出:ScreenOrientation {angle: 0, type: "landscape-primary", onchange: null}
获取屏幕的宽度和高度
您可以使用 screen 对象的 width 和 height 属性来获取用户计算机屏幕的宽度和高度(单位为像素),示例代码如下:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript</title> </head> <body> <button type="button" onclick="getResolution();">获取屏幕的宽度和高度</button> <script type="text/javascript"> function getResolution() { alert("您计算机屏幕的尺寸为:" + screen.width + "x" + screen.height); } </script> </body> </html>运行结果如下图所示:
图1:获取屏幕的宽度和高度
获取屏幕的颜色深度
您可以使用 screen 对象的 colorDepth 属性来获取用户计算机屏幕的颜色深度,示例代码如下:提示:颜色深度表示屏幕能够产生多少中颜色,例如,颜色深度为 8 的屏幕可以产生 256 种颜色(即 28),目前大部分屏幕的颜色深度为 24 或 32,一些较旧的显示器的颜色深度为 8 或 16。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript</title> </head> <body> <button type="button" onclick="getColorDepth();">获取颜色深度</button> <script type="text/javascript"> function getColorDepth() { alert("您计算机屏幕的颜色深度为:" + screen.colorDepth); } </script> </body> </html>运行结果如下图所示:
图2:获取屏幕的颜色深度