<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的标准在作怪啊
如果在页面中添加这行标记的话
在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高）
分享到：
相关推荐
本项目“Java爬虫+URL获取Img高宽”专注于一个特定的应用场景，即通过Java爬虫从网页中提取图片（Img）的URL，并进一步获取这些图片的宽度和高度。这个功能在网站数据分析、图像处理或自动化测试等场景中具有重要...
在Java编程语言中，我们可以利用HTTP库来请求网页，然后解析HTML内容，从而获取到图片的相关信息。本篇文章将详细讲解如何使用Java实现这一功能。 首先，我们需要理解爬虫的基本工作流程： 1. **发送HTTP请求**：...
### JavaScript 获取网页各种高宽及位置的方法总结 #### 屏幕尺寸相关属性 - **`screen.width`**：表示屏幕的宽度（以像素为单位）。 - **`screen.height`**：表示屏幕的高度（以像素为单位）。 - **`screen....
在实际应用中，这些DOM操作和浏览器尺寸获取方法广泛应用于响应式设计、页面动态更新、用户交互和动画效果等方面。例如，在一个电子商务网站中，可能需要根据浏览器窗口的大小调整布局，或者动态加载商品轮播图，...
实际上，这种尺寸信息并不是从Flash文件本身获取的，而是页面作者根据需要预先设定的。在JavaScript中，通过访问嵌入的Flash对象的`width`和`height`属性，可以取得这些预设值。如下是一个示例代码： ```html <!...
获取屏幕的高宽（分辨率） screen.width //屏幕的宽 screen.height //屏幕的高 screen.availWidth //屏幕可用宽度 屏幕的像素高度减去系统部件高度之后的值 screen.availHeight //屏幕可用高度 屏幕的像素宽度减去...
在JavaScript中，获取网页的各种高宽与位置是前端开发中常见的需求，这涉及到对不同对象属性的使用。本文将详细阐述这些方法。 首先，我们关注`screen`对象，它提供了关于用户屏幕的基本信息。`screen.width`和`...
在编写网页时，常常需要获取页面中图片元素的尺寸，这包括图片的高度和宽度。在JavaScript中，有多种方法可以实现这一需求，本篇文章将逐一介绍这些方法，并通过实例演示它们的具体应用。 首先，最直接的方法是通过...
图片加载涉及到从服务器获取图片数据并展示在网页上。服务器端可以通过Servlet或Controller响应HTTP GET请求，读取已保存的图片文件并将其作为HTTP响应的二进制流返回。客户端（浏览器）接收到数据后，自动解析为...
Jcrop是一款广泛应用于Web开发中的JavaScript图片裁剪插件，它允许用户在网页上选择并裁剪图片，常用于头像上传、图片编辑等场景。本文将深入探讨Jcrop插件如何实现高宽比例固定的裁剪功能以及效果预览。 Jcrop的...
在JavaScript和jQuery中...总之，动态获取手机屏幕高宽时，需确保DOM已经加载完成，并考虑页面加载、资源加载和设备旋转等可能影响因素。通过合理选择和组合上述方法，可以确保在任何情况下都能准确地获取到屏幕尺寸。
本文介绍了一款用于获取浏览器常用高宽的jQuery插件。该插件兼容了BackCompat和CSS1Compat两种模式的页面渲染，并且经过了多种浏览器的测试验证，包括Firefox、IE 6/7/8、Chrome和Opera。该插件允许开发者使用jQuery...
在现代网页设计中，实现页面布局的高宽自适应是一个常见需求。尤其是在响应式网页设计中，高宽自适应的实现尤为关键，以确保网站能够在不同尺寸的设备和屏幕上保持良好的布局和可读性。 文章首先提到了利用div和css...
在Web开发过程中，常常需要在页面加载完毕后对图片进行操作，比如获取图片的高度和宽度，以便于进行布局调整。JQuery为我们提供了许多方便的API来实现这一需求。本文将详细探讨使用JQuery在页面加载完毕后获取图片...
本文将详细探讨CSS中与文本相关的样式以及如何使用jQuery来获取DOM对象的高宽。 首先，我们关注CSS中关于文本的样式控制： 1. `word-break` 属性用于设置或检索单词在容器边界处的处理方式。`normal`是浏览器的...
在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作，包括设置和获取网页元素的宽度和高度。本篇文章将详细讲解如何利用jQuery的`width()`和`height()`方法来改变指定网页元素的尺寸。 首先...