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. ABAP系统值

    SY-SUBRC:语句执行后的返回值,0表示成功 SY-DATUM:当前服务器日期 SY-UZEIT:当前服务器时间 SY-ULINE:255长度的水平线 SY-VLINE:垂直线 SY-INDEX: ...

  2. appium+python环境搭建

    一.环境 1.安装python. 2.安装appium. 3.安装pip 4.安装selenium 5.安装Appium-Python-Client       #cmd->cd setupto ...

  3. Apache优化配置：修改最大并发连接数

    此文摘自: http://www.365mini.com/page/apache-concurrency-configuration.htm Apache查看连接数和限制当前的连接数 : http:/ ...

  4. linux命令dd

    原文链接: http://blog.csdn.net/adaptiver/article/details/6672592 dd 使用dd这个linux命令可以创建一定大小文件. linux创建文件命令 ...

  5. BZOJ 4004: [JLOI2015]装备购买 [高斯消元同余 线性基]

    和前两(一)题一样,不过不是异或方程组了..... 然后bzoj的新数据是用来卡精度的吧..... 所有只好在模意义下做啦 只是巨慢无比 #include <iostream> #incl ...

  6. spring security 4 filter 顺序及作用

    Spring Security 有两个作用:认证和授权 一.Srping security 4 filter 别名及顺序 spring security 4 标准filter别名和顺序,因为经常要用就 ...

  7. 【IT人】如何提高阅读源代码的效率

    1.最近刚到公司,公司就发一架构代码自己看,看了几天看的想吐,也在网上找了下相关的技巧吧,不是有句话叫做:成功必有方法,失败总是借口! 2.借鉴别人的方法来看看如下: 记得在开源流行之前,我看过的代码 ...

  8. python写一个md5解密器

    前言: md5解密,百度了一下发现教程不是很多也不详细. 这个图都没一张...跳转地址:点我 0x01 windows环境,kali也可以啊 burpsuite requests模块 bs4模块 0x ...

  9. jQuery中animate()方法用法实例

    本文实例讲述了jQuery中animate()方法用法.分享给大家供大家参考.具体分析如下: 此方法用于创建自定义动画,并且能够规定动画执行时长.擦除效果.动画完成后还可以地触发一个回调函数. ani ...

  10. PLEC-交流电机系统+笔记

    1.固有机械特性近似图 2.三相交流电机的控制系统 1)理论推导 第一次制动选择能耗制动,第二次制动选择倒拉制动. 2)模型搭建 3)模拟仿真 3.心得体会和笔记总结 制动方式的选择主要是根据各个制动 ...