数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何在 JavaScript 中获取屏幕的宽度和高度？
在本文中，我们将讨论如何在 JavaScript 中获取屏幕的宽度和高度。
Javascript 提供了一个 `window.screen` 对象，其中包含有关用户屏幕的信息。这些信息包括高度和宽度，以及许多其他功能。
要查找屏幕的高度和宽度，您需要使用以下只读属性：
- `screen.height` − 此属性用于以像素为单位获取屏幕的高度。
- `screen.width` − 此属性用于以像素为单位获取屏幕的宽度。
语法
以下是分别获取屏幕高度和宽度的语法：
screen.height; screen.width;
示例 1
在以下示例中，使用 `screen.width` 方法显示屏幕的宽度。
<html>
<body>
<p id="width"> </p>
<script>
document.getElementById("width").innerHTML =
"Screen width is " + screen.width;
</script>
</body>
</html>
示例 2
在以下示例中，使用 `screen.height` 方法显示屏幕的高度。
<html>
<body>
<p id="height"> </p>
<script>
document.getElementById("height").innerHTML =
"Screen heigth is " + screen.height;
</script>
</body>
</html>
示例 3
在以下示例中，我们尝试使用 `screen.width` 和 `screen.height` 属性获取屏幕的宽度和高度：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Get the width and height of the screen</title>
<div id="width"></div>
<div id="height"></div>
</head>
<body>
<script type="text/javascript">
document.getElementById("width").innerHTML ="Width of the screen : " + screen.width;
document.getElementById("height").innerHTML ="Height of the screen : " + screen.height;
</script>
</body>
</html>
示例 4
以下是另一个示例：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Get the width and height of the screen</title>
<input type="button" onclick="getWidthLength()" value="click here to get the width and height"></inpu>
<div id="width"></div>
<div id="height"></div>
</head>
<body>
<script type="text/javascript">
let getWidthLength = function () {
document.getElementById("width").innerHTML ="Width of the screen : " + screen.width;
document.getElementById("height").innerHTML ="Height of the screen : " + screen.height;
};
</script>
</body>
</html>
更新于：2022年12月7日
9K+ 次浏览
广告