极客教程如何使用jQuery获得屏幕、当前网页和浏览器窗口的大小
jQuery可以用来获取当前页面的尺寸。这些尺寸包括屏幕，视口和文档的高度，和宽度。
- 获取窗口尺寸。窗口尺寸是指浏览器窗口的大小。这是在调整浏览器大小时改变的尺寸。窗口的高度和宽度可以在选择窗口对象后用height()和width()方法访问。
- 获取文档的尺寸。文档的尺寸是指HTML文档的大小。文档的高度和宽度可以在选择文档对象后通过height()和width()方法来获取。
- 获取屏幕尺寸。屏幕尺寸是用户屏幕的总尺寸。屏幕的高度和宽度可以通过高度和宽度属性访问。
示例:
<!DOCTYPE html>
<head>
<title>
Get the size of the screen, current
web page and browser window using
jQuery?
</title>
<script src=
"https://code.jquery.com/jquery-2.2.4.min.js">
</script>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
How to get the size of the screen,
current web page and browser
window using jQuery?
</b>
<p>Window Height is:
<span class="windowHeight"></span>
</p>
<p>Windows Width is:
<span class="windowWidth"></span>
</p>
<p>Document Height is:
<span class="documentHeight"></span>
</p>
<p>Document Width is:
<span class="documentWidth"></span>
</p>
<p>Screen Height is:
<span class="screenHeight"></span>
</p>
<p>Screen Width is:
<span class="screenWidth"></span>
</p>
<button id="btn">
Click Here to check the dimensions
of the page:
</button>
<script type="text/javascript">
("#btn").on("click", function () {
windowHeight =(window).height();
windowWidth = (window).width();
documentHeight =(document).height();
documentWidth = $(document).width();
screenHeight = screen.height;
screenWidth = screen.width;
document.querySelector('.windowHeight').textContent
= windowHeight;
document.querySelector('.windowWidth').textContent
= windowWidth;
document.querySelector('.documentHeight').textContent
= documentHeight;
document.querySelector('.documentWidth').textContent
= documentWidth;
document.querySelector('.screenHeight').textContent
= screenHeight;
document.querySelector('.screenWidth').textContent
= screenWidth;
});
</script>
</body>
</html>
输出:
- 在点击按钮之前。
- 点击该按钮后。
