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. iOS-时间戳(或date)转字符串

    1.时间戳转字符串 ///时间戳转化为字符转0000-00-00 00:00 + (NSString *)time_timestampToString:(NSInteger)timestamp{ NS ...

  2. xBIM 基本的模型操作

    目录 xBIM 应用与学习 (一) xBIM 应用与学习 (二) xBIM 基本的模型操作 xBIM 日志操作 XBIM 3D 墙壁案例 xBIM 格式之间转换 xBIM 使用Linq 来优化查询 x ...

  3. xcode7中使用cocos2d-x3.8的webview控件

    在XCode7中使用cocos2d-x 3.3以上版本的WebView控件时,碰到了编译错误 App Transport Security has blocked a cleartext HTTP ( ...

  4. pyhton:图像旋转

    最近一个作业中要用到图像旋转,分享一下学习过程.如有讲错的地方,恳请指正! 图像旋转,想想真简单啊,不就是将图像矩阵乘上一个旋转平移矩阵就完了吗?实际上还真没这么简单.首先这个旋转平移矩阵怎么获得?通 ...

  5. springMvc+swagger整合例子

    Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务.总体目标是使客户端和文件系统作为服务器以同样的速度来更新.文件的方法,参数和模型紧密集成到服 ...

  6. Nodejs的运行原理-模块篇

    前言 使用Nodejs,就不可避免地引用第三方模块,它们有些是Nodejs自带的(例:http,net...),有些是发布在npm上的(例:mssql,elasticsearch...) 本篇章聚焦3 ...

  7. UITableView 的使用小点

    1.系统默认的颜色设置//无色 cell.selectionStyle = UITableViewCellSelectionStyleNone; //蓝色 cell.selectionStyle = ...

  8. zabbix客户端一键安装脚本(主动模式监控)

    #!/bin/bash basepath=$(cd `dirname $0`; pwd)SHELL_DIR="${basepath}/shell"PACKAGE_DIR=" ...

  9. 在CentOS 7中安装Jetty服务器

    Jetty 是一款纯Java的HTTP (Web) 服务器和Java Servlet容器. 通常在更大的网络框架中,Jetty经常用于设备间的通信,而其他Web服务器通常给"人类" ...

  10. tomcat在centos下的操作

    一 .Tomcat启动与停止 进入Tomcat中bin所在目录 cd /usr/tomcat/bin 启动: ./startup.sh 停止: ./shutdown.sh 平常可以用这个命令来查看to ...