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的神经网络

    欢迎大家前往云+社区,获取更多腾讯海量技术实践干货哦~ 来自维基百科: 人工神经网络(ANN)或连接系统是受生物神经网络启发构成生物大脑的计算系统.这样的系统通过考虑例子来学习(逐步提高性能)来完成任 ...

  2. 深入理解JAVA虚拟机之JVM性能篇---基础知识点（运行时数据区域）

    一. 运行数据区域划分 各个数据区域功能如下: 1. 程序计数器: 较小的一块内存空间,可以看做是当前线程所执行的字节码的行号指示器,每条线程都有一个独立的程序计数器,各条线程之间计数器互不影响,独立 ...

  3. java之过滤器Filter

    Java三大器之过滤器(Filter)的工作原理和代码演示   一.Filter简介 Filter也称之为过滤器,它是Servlet技术中最激动人心的技术之一,WEB开发人员通过Filter技术,对w ...

  4. CentOS 7.1静默安装11.2.0.3 64位单机数据库软件

    第1章 CentOS 7.1静默安装11.2.0.3 64位单机数据库软件 1.1  安装前的准备工作 1.1.1      软件准备 1.1.2      检查硬件 注意这里的内存应该满足要求,不然 ...

  5. vue2.0开发时导入组件时出错

    导入自定义组件时出现了如下错误 ERROR Failed to compile with 1 errors 12:35:41 This dependency was not found: * comp ...

  6. 浅析Xilinx 三速以太网MAC IP核

    之前在使用Altera的三速以太网MAC IP的基础上,完成了UDP协议数据传输.此次为了将设计移植到xilinx FPGA上,需要用到xilinx的三速以太网MAC IP核,当然也可以自己用HDL编 ...

  7. Git教程：

    使用前配置: git init git config --global user.name "yanpeng1314" git config --global user.email ...

  8. vscode php跳转

    最近在写一个php项目,最后选定使用vscode编辑器,然后研究了一下断点调试.格式代码.点击跳转 以下是配置步骤,记录一下 1.代码格式化及跳转  1.前提条件:安装7.0以上版本php,     ...

  9. mongodb 学习二

    基本操作 增删改查实一个数据库必备的操作,接下来我们就说说怎么在shell下进行增删改查. 我们另外打开一个"命令指示符"窗口(注意:之前的不能关闭),输入mongo打开Mongo ...

  10. Zabbix监控之迁移zabbix server

    abbix监控中有时会根据需要对zabbix服务器进行迁移,zabbix迁移是非常简单的,因为zabbix的前端所有的操作都存在zabbix数据库里.所以zabbix迁移只需对zabbix库中相应的表 ...