`
sptgreen
  • 浏览: 45491 次
  • 性别: Icon_minigender_1
  • 来自: 荆门
社区版块
存档分类
最新评论

测试网页的高和宽

阅读更多
<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> ----------------------------------------------------------------------------------------
分享到:
评论

相关推荐

    爆破图片高和宽的python脚本

    爆破图片高和宽的python脚本

    获取图形的高和宽

    ### 获取图形的高和宽——OpenCV基础知识 #### 一、引言 在图像处理领域,OpenCV(开源计算机视觉库)是一个强大的工具包,它提供了广泛的算法来处理图像和视频流。对于初学者而言,了解如何加载图像以及获取图像...

    js 加载框架 自动调整高和宽

    在JavaScript(JS)中,创建一个能够根据内容自动调整宽度和高度的加载框架是一个常见的需求,特别是在构建响应式网页或动态加载内容时。这个过程涉及到多个知识点,包括DOM操作、事件监听、计算元素尺寸以及跨域...

    5.2 填充和步幅

    在上一节的例子里,我们使用高和宽为3的输入与高和宽为2的卷积核得到高和宽为2的输出。一般来说,假设输入形状是nh×nwn_h\times n_wnh​×nw​,卷积核窗口形状是kh×kwk_h\times k_wkh​×kw​,那么输出形状将会...

    通过JS自动调整图片的大小以适应div的高和宽

    在网页设计中,图片的展示效果对于用户体验至关重要。有时候,我们希望图片能够自动调整大小以适应其所在的div容器,同时保持原始的长宽比,确保图片不会失真。本文将详细探讨如何通过JavaScript(JS)实现这一功能...

    react-ReactSizes轻松将window大小高和宽映射到props

    1. **SizeMe**: `SizeMe`是一个高阶组件(Higher-Order Component, HOC),它接收一个React组件作为参数,并返回一个新的组件。新组件会监听窗口尺寸的变化,然后将当前的宽度和高度作为props传递给子组件。这样,你...

    1097 画矩形.cpp

    输入四个参数:前两个参数为整数,依次代表矩形的高和宽(高不少于3行不多于10行,宽不少于5列不多于10列);第三个参数是一个字符,表示用来画图的矩形符号;第四个参数为1或0,0代表空心,1代表实心。 【输入】 ...

    显示当前窗口的坐标值程序(vb6.0源代码编写)显示当前窗口的坐标值,并显示窗体的高和宽。

    在VB6.0编程环境中,开发人员经常需要获取和处理窗口的位置和尺寸信息,以便进行界面布局、动画效果或者响应用户的交互操作。标题和描述提到的"显示当前窗口的坐标值程序"是一个实用的小工具,它能实时显示窗口在...

    CTF工具之010editor(misc).rar

    010 Editor是一款强大的二进制文件分析工具,尤其在CTF(Capture The Flag)比赛中,它是Misc(杂项)类别问题解决中的必备利器。它不仅适用于初学者,也受到高级安全研究人员的喜爱,因为它提供了直观的界面和强大...

    010Editor模板—更新

    这使得该工具具有极高的灵活性和扩展性,能应对各种复杂的二进制格式挑战。通过“010Templates”这个压缩包,用户可以方便地获取并安装这些更新的模板,确保他们在使用010Editor时拥有最前沿的解析能力。 总的来说...

    判知图片的大小(宽度与高度)

    void CPicSizeDlg::OnGetsize() { UpdateData(TRUE); //m_strFile是位图文件的路径 if(m_strFile == "") { AfxMessageBox("请选择文件"); } CFile file;...file.Open( m_strFile, CFile::modeRead) ) ...

    bsp-layout:管理bspwm中的布局(高和宽)

    本文将深入探讨如何使用`bsp-layout`工具来调整BSPWM中的布局,尤其是关注窗口的高和宽。 ### 1. 了解BSPWM布局原理 BSPWM的核心理念是将屏幕划分为不同的区域,每个区域称为一个"节点"。窗口可以分配到这些节点中...

    根据已知高和宽绝对垂直居中div示例代码

    在网页设计中,将一个元素(如一个div)在页面上绝对垂直居中是一个常见的需求。这个需求在标题和描述中被提及,涉及到已知高度和宽度的div元素的绝对定位。以下是一个详细的解释和扩展。 首先,让我们分析提供的...

    解决jQuery动态获取手机屏幕高和宽的问题

    今天帮同事解决了用jQuery获得动态的手机屏幕宽高的问题。 问题的起因是,当同事用了一个需要全屏滚动的图片控件时,需要获得屏幕的高度来设置图片为全屏。但是他用$(window).height()始终无法第一次拿到高,刷新...

    第二学期冀教版五年级数学第三单元测试卷及答案二精选.doc

    根据长方体的性质,可以分别计算出长×宽、长×高和宽×高的面积,然后按照大小排序。 3. **长方体的表面积**:长方体或正方体所有六个面的总面积称为表面积。计算时,通常将两个长×宽的面、两个长×高的面和两个...

    jquery插件:ajax和iframe加载提示效果1.1版

    3,当iframe以tab标签的方式显示时,由于tab标签切换执行也需要一段时间,造成的获取的iframe的高和宽不是最终的高和宽 4,其他细微调整。 草草增加了一个例子。和新版本打包在一起。 遗留问题: 1,不支持多个...

    DRMsoft视频加密软件网络授权加密端10.0

    4、指定认证时弹出的授权网页高和宽; 5、执行加密; 加密后会生成同名的.exe格式加密文件,双击exe播放文件就可以进行播放。 6、前后台管理入口(全部代码开放,实际应用时安装到客户网站上): 服务器端管理员...

    弹出自适应图片大小的窗口弹出窗口根据图片大小,自动判断高和宽。

    iPop Demo iPop Demo This is a demo of the image popup script. I know you want to see it in action. Testing things with a small image. The popups have been setup with the AutoApply extension which...

Global site tag (gtag.js) - Google Analytics