JavaScript 获取页面宽高的方法2010年01月19日 下午 06:06JavaScript 获取页面宽高的方法
<script>
function getInfo()
{
var s = "";
s += " 网页可见区域宽："+ document.body.clientWidth;
s += " 网页可见区域高："+ document.body.clientHeight;
s += " 网页可见区域宽："+ document.body.offsetWidth + " (包括边线和滚动条的宽)";
s += " 网页可见区域高："+ document.body.offsetHeight + " (包括边线的宽)";
s += " 网页正文全文宽："+ document.body.scrollWidth;
s += " 网页正文全文高："+ document.body.scrollHeight;
s += " 网页被卷去的高(ff)："+ document.body.scrollTop;
s += " 网页被卷去的高(ie)："+ document.documentElement.scrollTop;
s += " 网页被卷去的左："+ document.body.scrollLeft;
s += " 网页正文部分上："+ window.screenTop;
s += " 网页正文部分左："+ window.screenLeft;
s += " 屏幕分辨率的高："+ window.screen.height;
s += " 屏幕分辨率的宽："+ window.screen.width;
s += " 屏幕可用工作区高度："+ window.screen.availHeight;
s += " 屏幕可用工作区宽度："+ window.screen.availWidth;
s += " 你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色";
s += " 你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸";
//alert (s);
}
getInfo();
</script>
在我本地测试当中：
在IE、FireFox、Opera下都可以使用
document.body.clientWidth
document.body.clientHeight
即可获得，很简单，很方便。
而在公司项目当中：
Opera仍然使用
document.body.clientWidth
document.body.clientHeight
可是IE和FireFox则使用
document.documentElement.clientWidth
document.documentElement.clientHeight
原来是W3C的标准在作怪啊
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
如果在页面中添加这行标记的话
在IE中：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
在FireFox中：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
在Opera中：
document.body.clientWidth ==> 可见区域宽度
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）
而如果没有定义W3C的标准，则
IE为：
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0
FireFox为：
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）
Opera为：
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）
分享到：
相关推荐
本篇文章将详细探讨各种页面刷新方法，并基于提供的信息进行深入解析。 首先，页面刷新通常分为两种类型：客户端刷新和服务器端刷新。客户端刷新是指在浏览器端执行的刷新操作，而服务器端刷新则涉及服务器的参与。...
使用 `document.referrer` 可以获取到上一个页面的URL，这对于统计和分析用户行为非常有用。 ### 16. 控制窗口状态 ```html ``` 这些对象可以用来控制浏览器窗口的状态，如最小化、最大化和关闭等。 以上技巧...
为了解决这个问题，我们可以采用两种常见的JavaScript方法来破解微信的防盗链策略。 方法一利用了一个巧妙的技巧，通过在页面中动态插入IFrame来解决。这段代码首先引入了jQuery库，然后遍历页面中的所有图片元素。...
在JavaScript中，数组的排序可以使用`Array.prototype.sort()`方法。这个方法接受一个比较函数作为参数，用于决定元素的排列顺序。比较函数一般有两个参数，如果返回值小于0，那么第一个参数应该排在第二个参数前面...
JavaScript是一种广泛应用于Web开发的脚本语言，它在浏览器端运行，为网页添加交互性，使得用户能够与页面进行动态沟通。这篇博文整理了55个JavaScript中的常用方法，涵盖了数组操作、对象处理、字符串处理、函数...
例如，可以使用`$(window).scroll()`函数来绑定滚动事件，`$(window).scrollTop()`和`$(document).height()`等方法获取当前滚动位置和页面总高度，判断是否需要加载更多内容。 ```javascript $(window).scroll...
标题中的“js提示框-转载+++ js 乱码+++自动提交+滚动图片加载+箭头导航(转载)”表明这篇内容涵盖了多个JavaScript相关的知识点。这里我们将分别解析这些关键点，并深入探讨它们。 首先，"js提示框"指的是...
为了实现这个需求，我们可以借助 $router.resolve 方法来获取目标路由的完整 URL，然后用 window.open 方法打开新窗口。下面是一个具体的例子： ```javascript methods: { seeShare() { let routeUrl = this.$...
AJAX（Asynchronous JavaScript and XML）是Web开发中一种用于创建快速交互式网页的技术，它允许在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。这种技术的核心在于JavaScript异步通信，它极大地提升...
欢迎添加我的个人微信frontJS，获取大厂面试题及其答案版权声明本文为博主原创文章，未经博主允许不得转载。掘金博客（全集）sectionFault博客(精华)想加入加入交流群，跟风暴一线大厂的大佬交流学习，先关注「前端...
3. **调用浏览器Geolocation API**：使用`navigator.geolocation`对象的`getCurrentPosition`方法，这个方法可以异步地获取到用户的当前地理位置。 ```javascript function onComplete(position) { // 这里是...
JavaScript AutoScroller是一个JavaScript类，用于在浏览器窗口中自动滚动元素，帮助开发者在Web页面上实现自动滚动效果。通过定义AutoScroll类，我们可以方便地将页面元素按设定的规则进行滚动。 AutoScroller类的...
获取页面标题是通过JavaScript执行的，这展示了如何使用`JavascriptExecutor`执行JavaScript代码并返回结果。在本例中，我们获取了当前页面的标题并打印出来。 接下来，我们点击"创建相册"链接，然后输入新相册的...
2. 获取日期：可以使用JavaScript的Date对象获取当前日期或指定日期，例如`new Date()`。 3. 自定义格式化：由于JavaScript的Date对象不直接支持中文日期格式，所以需要编写自定义函数，将日期的各个部分（年、月、...
请参考压缩包中的"复制文章自动加上版权的功能实现方法（代码）"文件，以获取更详细的实现代码和示例。这个功能不仅适用于个人博客，也可以应用于新闻网站、在线教育平台等，帮助维护内容创作者的合法权益。
2. **组件为中心的开发**：与传统的以页面为中心的开发模型（如SSJS和ASP）相比，JSP采用组件为中心的方法。这种模型鼓励重用和分离业务逻辑，提高了代码的可维护性和可扩展性。JavaBeans和Enterprise JavaBeans...