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. 初识Python装饰器

    python中,一切皆对象.做为面向对象开发中非常重要的一个环节,函数有着无可替代的作用. 函数可以作为对象赋值给一个变量,可以作为元素添加到集合对象中,可以作为参数值传递给其它函数,还可以当做函数的 ...

  2. 用Elasticsearch构建电商搜索平台，一个极有代表性的基础技术架构和算法实践案例[转]

    原文链接:http://mp.weixin.qq.com/s?__biz=MzA5NzkxMzg1Nw==&mid=2653160642&idx=1&sn=608f4e6883 ...

  3. 快速傅里叶变换 & 快速数论变换

    快速傅里叶变换 & 快速数论变换 [update 3.29.2017] 前言 2月10日初学,记得那时好像是正月十五放假那一天 当时写了手写版的笔记 过去近50天差不多忘光了,于是复习一下,具 ...

  4. BZOJ 3697: 采药人的路径 [点分治] [我想上化学课]

    传送门 题意: 路径有$-1,1$两种权值,求有多少路径满足权值和为$0$且有一个点将路径分成权值和为$0$的两段 第四节课本来想去上化学,然后快上课了这道题还没调出来.....可恶我想上化学 昨天两 ...

  5. BZOJ 1069: [SCOI2007]最大土地面积 [旋转卡壳]

    1069: [SCOI2007]最大土地面积 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 2978  Solved: 1173[Submit][Sta ...

  6. DNA序列组装（贪婪算法）

    生物信息学原理作业第四弹:DNA序列组装(贪婪算法) 原理:生物信息学(孙啸) 大致思想: 1. 找到权值最大的边: 2. 除去以最大权值边的起始顶点为起始顶点的边: 3. 除去以最大权值边为终点为终 ...

  7. SDN第5次上机作业

    SDN第5次上机作业 实验目的 1.搭建如下拓扑并连接控制器 2.下发相关流表和组表实现负载均衡 3.抓包分析验证负载均衡 实验步骤 1.建立以下拓扑,并连接上ODL控制器. 提交要求:ODL拓扑界面 ...

  8. 5.C++里的4种新型类型转换

    1首先来回顾C的强制转换 大家都知道,在编译C语言中的强制转换时,编译器不会检查转换是否成功,都会编译正确. 比如: #include "stdio.h" struct Posit ...

  9. Navicat的使用

    Navicat的使用 navicat作为一种数据库的操作工具,在工作中使用的频率很高.相比phpMyAdmin而言,无论是从界面操作的易用性上,还是外观上,抑或是IP的配置上都有着很大的突出优势.ph ...

  10. shell脚本实现anisble客户端脚本分发和密钥授权配置

    ##############################Deploy ansible client shell######################## echo "start d ...