JavaScript获取屏幕和页面的宽度和高度

1、设计源码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>宽度和高度</title>
<script type="text/javascript">
    function widthAndHeight()
	{
		//网页可见区域宽
		var clientWidth = document.body.clientWidth;
		//网页可见区域高
		var clientHeight = document.body.clientHeight;
		//网页正文全文宽
		var scrollWidth = document.body.scrollWidth;
		//网页正文全文高
		var scrollHeight = document.body.scrollHeight;
		//网页可见区域宽(包括边线的宽)
		var offWidth = document.body.offsetWidth;
		//网页可见区域高(包括边线的宽)
		var offHeight = document.body.offsetHeight;
		//屏幕分辨率的宽
		var screenWidth = window.screen.width;
		//屏幕分辨率的高
		var screenHeight = window.screen.height;
		//屏幕可用工作区宽度
		var avaWidth = window.screen.availWidth;
		//屏幕可用工作区高度
		var avaHeight = window.screen.availHeight;

		document.writeln("网页可见区域宽：" + clientWidth + "<br>");
		document.writeln("网页可见区域高：" + clientHeight + "<br>");
		document.writeln("网页正文全文宽：" + scrollWidth + "<br>");
		document.writeln("网页正文全文高：" + scrollHeight + "<br>");
		document.writeln("网页可见区域宽(包括边线的宽)：" + offWidth + "<br>");
		document.writeln("网页可见区域高(包括边线的宽)：" + offHeight + "<br>");
		document.writeln("屏幕分辨率的宽：" + screenWidth + "<br>");
		document.writeln("屏幕分辨率的高：" + screenHeight + "<br>");
		document.writeln("屏幕可用工作区宽度：" + avaWidth + "<br>");
		document.writeln("屏幕可用工作区高度：" + avaHeight + "<br>");

	}
</script>
</head>

<body>
   <input type="button" id="btn" value="宽度和高度" onclick="widthAndHeight()"/>
</body>
</html>

2、运行结果

（1）初始化

（2）点击后

网页可见区域宽：1309
网页可见区域高：26
网页正文全文宽：1325
网页正文全文高：577
网页可见区域宽(包括边线的宽)：1309
网页可见区域高(包括边线的宽)：26
屏幕分辨率的宽：1366
屏幕分辨率的高：768
屏幕可用工作区宽度：1366
屏幕可用工作区高度：728

JavaScript获取屏幕和页面的宽度和高度的更多相关文章

  1. JavaScript获取html元素的实际宽度和高度

    一.JavaScript获取html元素宽高 1.宽高都写在样式表里,就比如#div1{width:120px;}.这中情况通过#div1.style.width拿不到宽度,而通过#div1.offs ...

  2. javascript 获取iframe里页面中元素值的方法 关于contentWindow和contentDocumen

    javascript 获取iframe里页面中元素值的方法 IE方法:document.frames['myFrame'].document.getElementById('test').value; ...

  3. js 获取浏览器显示内容的宽度和高度

      js获取浏览器显示内容的宽度和高度 CreateTime--2017年7月10日17:24:12Author:Marydon 1.获取浏览器屏幕显示d的网页宽度 /** * 得到浏览器显示的屏幕高 ...

  4. jQuery获取或设置元素的宽度和高度

    jQuery获取或设置元素的宽度和高度: 可使用以下3种方法: 1,jQuery width() 和 height() 方法: 2,innerWidth() 和 innerHeight() 方法: 3 ...

  5. ios 获取屏幕的属性和宽度

    app尺寸,去掉状态栏 CGRect r = [ UIScreen mainScreen ].applicationFrame; r=0,20,320,460 屏幕尺寸 CGRect rx = [ U ...

  6. 获取Winform窗体、工作区 宽度、高度、命名空间、菜单栏高度等收集

    MessageBox.Show("当前窗体标题栏高"+(this.Height - this.ClientRectangle.Height).ToString());//当前窗体标 ...

  7. Jquery 获取屏幕及滑块及元素的高度及距离

    alert($(window).height()); //浏览器时下窗口可视区域高度 alert($(document).height()); //浏览器时下窗口文档的高度 alert($(docum ...

  8. 后台程序获取JPG/GIF/PNG图片宽度、高度

    这是很久之前编写的代码,该代码是读取流数据指定位置的内容,获取图片的宽度.高度值. 由于系统更新,这些代码丢之不用,在这里存个档吧! 1. 获取gif图片宽度.高度.(binary_是图片流数据) ' ...

  9. 日常捕获的野生知识 - javascript获取屏幕大小

    刚刚接触JavaScript,涉及到 document , window 的一些基本知识不是很了解,今天为了一个屏幕大小折腾了半天,幸好找到了很好的例子学习. 代码如下: <html> & ...

随机推荐

  1. JAVA并发编程学习笔记------FutureTask

    FutureTask是Future和Callable的结合体.传统的代码是这样写的Future f = executor.submit(new Callable()); 然后通过Future来取得计算 ...

  2. Dell服务器R320在Centos6.5系统上安装MegaCli管理主板集成磁盘阵列卡

    折腾了两天啊,我的神啊,,终于可以安装了 针对Dell服务器的R320版本主板集成的磁盘阵列卡,需要下载MegaCli 8或更新版本 下载链接: http://pan.baidu.com/s/1mgB ...

  3. BZOJ 3932: [CQOI2015]任务查询系统 [主席树]

    传送门 题意: 任务用三元组(Si,Ei,Pi)描述,(Si,Ei,Pi)表示任务从第Si秒开始,在第Ei秒后结束(第Si秒和Ei秒任务也在运行),其优先级为Pi 调度系统会经常向查询系统询问,第Xi ...

  4. 使用xUnit为.net core程序进行单元测试(4)

    第1部分: http://www.cnblogs.com/cgzl/p/8283610.html 第2部分: http://www.cnblogs.com/cgzl/p/8287588.html 第3 ...

  5. Python tutorial阅读之函数的定义与使用

    函数的定义 Python 使用关键字def定义函数,格式与C语言类似,但是没有返回类型,参数也不需要设置类型. def add(a, b): """这是函数的文档字符串& ...

  6. Redis进阶实践之十一 Redis的Cluster集群搭建

    一.引言      本文档只对Redis的Cluster集群做简单的介绍,并没有对分布式系统的详细概念做深入的探讨.本文只是提供了有关如何设置集群.测试和操作集群的说明,而不涉及Redis集群规范中涵 ...

  7. Job 失败了怎么办？- 每天5分钟玩转 Docker 容器技术（133）

    上一节讨论了 Job 执行成功的情况,如果失败了会怎么样呢? 修改 myjob.yml,故意引入一个错误: 先删除之前的 Job: 如果将 restartPolicy 设置为 OnFailure 会怎 ...

  8. python中常见的三种句型if,while,for

    1.if语句: 特别说明:条件后面的冒号不能少,同样必须是英文字符. 特别特别说明:if内部的语句需要有一个统一的缩进,一般用4个空格.python用这种方法替代了其他很多编程语言中的{}. num= ...

  9. 关于一些php规范

    <?php /** * 符合psr-1,2的编程实例 * * @author GreenForestQuan */ namespace Standard; // 顶部命名空间 // 空一行 us ...

  10. egametang框架服务端运行流程

    et框架的构建块主要由entity和componet组成,类似unity的组件.一个Entity可以挂载多个不同Component.Entity和Component的共同基类Disposer用于提供对 ...