测试网页的高和宽

本文介绍了如何使用JavaScript获取不同浏览器下的网页尺寸、位置及屏幕分辨率等信息,并探讨了W3C标准对这些属性的影响。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<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高)


----------------------------------------------------------------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>网页宽高-www.51windows.Net</title>
</head>

<body><SCRIPT LANGUAGE="JavaScript">
var s = "";
s += "\r\n网页可见区域宽:"+ document.body.clientWidth;
s += "\r\n网页可见区域高:"+ document.body.clientHeight;
s += "\r\n网页可见区域宽:"+ document.body.offsetWidth +" (包括边线的宽)";
s += "\r\n网页可见区域高:"+ document.body.offsetHeight +" (包括边线的宽)";
s += "\r\n网页正文全文宽:"+ document.body.scrollWidth;
s += "\r\n网页正文全文高:"+ document.body.scrollHeight;
s += "\r\n网页被卷去的高:"+ document.body.scrollTop;
s += "\r\n网页被卷去的左:"+ document.body.scrollLeft;
s += "\r\n网页正文部分上:"+ window.screenTop;
s += "\r\n网页正文部分左:"+ window.screenLeft;
s += "\r\n屏幕分辨率的高:"+ window.screen.height;
s += "\r\n屏幕分辨率的宽:"+ window.screen.width;
s += "\r\n屏幕可用工作区高度:"+ window.screen.availHeight;
s += "\r\n屏幕可用工作区宽度:"+ window.screen.availWidth;
alert(s);
</SCRIPT>


</body>

</html>


<div style="position: absolute; top: 10; right: 10; width: 148; height: 18;cursor:hand">
<input type="button" name="Button" value="查看源代码" onClick= 'window.location = "view-source:" + window.location.href'></div> ----------------------------------------------------------------------------------------
使用WinHex修改JPG图片的高和宽需要一定的技术知识,因为JPG文件的结构比较复杂。以下是一个基本的步骤指南,但请注意,修改图片的尺寸可能会导致图片显示异常或损坏,建议在操作前备份原始文件。 1. **打开图片**:使用WinHex打开你要修改的JPG图片文件。 2. **查找EXIF数据**:JPG文件通常包含EXIF数据,其中包含图片的元数据,包括宽度和高度。你需要在WinHex中找到这些数据。 3. **定位SOF标记**:JPG文件中的Start Of Frame (SOF) 标记包含了图片的尺寸信息。常见的SOF标记有SOF0、SOF2等。你需要在WinHex中搜索这些标记。 4. **修改尺寸数据**:找到SOF标记后,标记后面的数据段包含了图片的宽度和高度。你需要根据需要修改这些数据。宽度和高度的数据通常是两个字节,分别表示高和宽。 5. **保存修改**:修改完成后,保存文件。确保保存时选择正确的文件格式和编码。 以下是一个简单的示例: 假设你找到了SOF0标记,数据段如下: ``` FF C0 00 11 08 00 01 00 01 00 00 FF C4 00 1A ... ``` 其中,`00 01 00 01` 分别表示宽度和高度(假设宽度为256,高度为256)。如果你想将宽度改为512,高度改为512,你需要将数据段修改为: ``` FF C0 00 11 08 00 02 00 02 00 00 FF C4 00 1A ... ``` 其中,`00 02 00 02` 表示宽度和高度为512。 6. **验证修改**:保存文件后,打开图片查看修改是否成功。 请注意,修改图片的尺寸可能会导致图片显示异常或损坏,建议在操作前备份原始文件。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值