首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JavaScript中获取高度和宽度函数总结

Posted in Javascript onOctober 08, 2014

html代码：

 <body> 

     <div class="father" id="father">

         <h3>这是父元素，屏幕分辨率是1366*768</h3>

         <div class="son" id="son">

             <h3>这是子元素，祝大家国庆快乐 </h3>

             <div class="grandson" id="grandson">

                 <h3>这是孙子元素，祝大家国庆快乐 </h3>

                 <h3>我的博客:3water.com</h3>

                 <h3>程序爱好者QQ群:</h3>

                 <h3>259280570  </h3>

                 <h3>欢迎你加入 </h3>

                 <h3>国庆快乐  </h3>

             </div>

         </div>

     </div>

     <div class="data">

         <h3>数据输出</h3>

         <div id="data"></div>

     </div>

 </body>

css：

 *

     {

         margin: 0 auto;

     }

     .father

     {

         width: 500px;

         height: 750px;

         border: 5px solid red;

         float: left;

     }

     .son

     {

         width: 400px;

         height: 300px;

         border: 5px solid black;

         margin: 20px;

     }

     .grandson

     {

         width: 150px;

         height: 100px;

         border: 5px solid blue;

         margin: 20px;

         overflow: auto;

     }

     .data

     {

         width: 600px;

         height: 750px;

         border: 5px solid red;

         float: left;

         margin-left: 15px;

     }

js:

 window.onload = function()

     {

         /*获取元素对象*/

         var father = document.getElementById('father');

         var son = document.getElementById('son');

         var grandson = document.getElementById('grandson');

         var data = document.getElementById('data');

         data.innerHTML = "<h3>获取视窗大小(跟窗口大小有关)</h3>";

         data.innerHTML += "document.body可见区域宽: "+document.body.clientWidth+"<br/>";

         data.innerHTML += "document.body可见区域高: "+document.body.clientHeight+"<br/>";

         data.innerHTML += "window.innerWidth可见区域宽: "+window.innerWidth+"<br/>";

         data.innerHTML += "window.innerHeight可见区域高: "+window.innerHeight+"<br/>";

         data.innerHTML += "document.documentElement可见区域宽: "+document.documentElement.clientWidth+"<br/>";

         data.innerHTML += "document.documentElement可见区域高: "+document.documentElement.clientHeight+"<br/>";

         data.innerHTML += "<h3>获取元素自身大小(跟是否有滚动条无关)</h3>";

         data.innerHTML += ".son自身宽度(offsetWidth属性，包括左右边框)："+son.offsetWidth+"<br/>";

         data.innerHTML += ".son自身高度(offsetHeight属性，包括上下边框)："+son.offsetHeight+"<br/>";

         data.innerHTML += ".son可视宽度(clientWidth属性，不包括左右边框)："+son.clientWidth+"<br/>";

         data.innerHTML += ".son可视高度(clientHeight属性，不包括上下边框)："+son.clientHeight+"<br/>";

         data.innerHTML += "<h3>获取.grandson滚动大小和可视大小</h3>";

         data.innerHTML += ".grandson滚动宽度(scrollWidth属性)："+grandson.scrollWidth+"<br/>";

         data.innerHTML += ".grandson滚动高度(scrollHeight属性)："+grandson.scrollHeight+"<br/>";

         data.innerHTML += ".grandson可视宽度(clientWidth属性，不包括竖直滚动条和border)："+grandson.clientWidth+"<br/>";

         data.innerHTML += ".grandson可视高度(clientHeight属性，不包括水平滚动条和border)："+grandson.clientHeight+"<br/>";

         data.innerHTML += "<h3>获取.grandson被卷去的大小(跟滚动条的位置有关)</h3>";

         data.innerHTML += ".grandson被卷去的高(scrollTop属性，竖直滚动条滑到最底端)："+grandson.scrollTop+"<br/>";

         data.innerHTML += ".grandson被卷去的左(scrollLeft属性，水平滚动条滑到最右端)："+grandson.scrollLeft+"<br/>";

         data.innerHTML += "<h3>获取浏览器窗口位置(跟窗口大小有关)</h3>";

         /*

         *IE、Chrome、Safari、Opera 都提供了支持 window.screenLeft 和 *window.screenTop，但是Firxfox不支持这个两个属性；

         *Firxfox、Chrome、Safari、Opera 都提供了支持 window.screenX *和 window.screenY，但是 IE 不支持这个两个属性；

         */

         var leftPos = (typeof window.screenLeft == 'number')?window.screenLeft:window.screenX;

         var topPos = (typeof window.screenTop == 'number')?window.screenTop:window.screenY;

         data.innerHTML += "body网页正文部分上(window.screenTop(Y))："+ topPos+"<br/>";

         data.innerHTML += "body网页正文部分左(window.screenLeft(X))："+ leftPos+"<br/>";

         data.innerHTML += "<h3>获取屏幕分辨率</h3>";

         data.innerHTML += "屏幕分辨率的高(window.screen.height)："+ window.screen.height+"<br/>";

         data.innerHTML += "屏幕分辨率的宽(window.screen.width)："+ window.screen.width+"<br/>";

         data.innerHTML += "<h3>获取屏幕可用的高宽</h3>";

         data.innerHTML += "屏幕分辨率的高(window.screen.availHeight)："+ window.screen.availHeight+"<br/>";

         data.innerHTML += "屏幕分辨率的宽(window.screen.availWidth)："+ window.screen.availWidth+"<br/>";

         data.innerHTML += "<h3>获取.father的边框大小</h3>";

         data.innerHTML += ".father上边框(clientTop)："+ father.clientTop+"<br/>";

         data.innerHTML += ".father左边框(clientLeft)："+ father.clientLeft+"<br/>";

         data.innerHTML += "<h3>获取.son到父元素边界的距离(即对应margin+父元素对应的border)</h3>";

         data.innerHTML += ".son到父元素上边界(offsetTop)："+ son.offsetTop+"<br/>";

         data.innerHTML += ".son到父元素左边界(offsetLeft)："+ son.offsetLeft+"<br/>";

     }

ps：浏览器对盒子的解析存在差异，所以以上得出的数据也会存在小小差异。附图一张。

JavaScript中获取高度和宽度函数总结

完整代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html> 
<head> 
<meta charset="utf-8" /> 
<title>test</title> 
<style type="text/css">
	*
	{
		margin: 0 auto;
	}
	.father
	{
		width: 500px;
		height: 750px;
		border: 5px solid red;
		float: left;
	}
	.son
	{
		width: 400px;
		height: 300px;
		border: 5px solid black;
		margin: 20px;
	}
	.grandson
	{
		width: 150px;
		height: 100px;
		border: 5px solid blue;
		margin: 20px;
		overflow: auto;
	}
	.data
	{
		width: 600px;
		height: 750px;
		border: 5px solid red;
		float: left;
		margin-left: 15px;
	}
</style>
<script type="text/javascript">
	window.onload = function()
	{
		/*获取元素对象*/
		var father = document.getElementById('father');
		var son = document.getElementById('son');
		var grandson = document.getElementById('grandson');
		var data = document.getElementById('data');
		data.innerHTML = "<h3>获取视窗大小(跟窗口大小有关)</h3>";
		data.innerHTML += "document.body可见区域宽: "+document.body.clientWidth+"<br/>";
		data.innerHTML += "document.body可见区域高: "+document.body.clientHeight+"<br/>";
		data.innerHTML += "window.innerWidth可见区域宽: "+window.innerWidth+"<br/>";
		data.innerHTML += "window.innerHeight可见区域高: "+window.innerHeight+"<br/>";
		data.innerHTML += "document.documentElement可见区域宽: "+document.documentElement.clientWidth+"<br/>";
		data.innerHTML += "document.documentElement可见区域高: "+document.documentElement.clientHeight+"<br/>";
		data.innerHTML += "<h3>获取元素自身大小(跟是否有滚动条无关)</h3>";
		data.innerHTML += ".son自身宽度(offsetWidth属性，包括左右边框)："+son.offsetWidth+"<br/>";
		data.innerHTML += ".son自身高度(offsetHeight属性，包括上下边框)："+son.offsetHeight+"<br/>";
		data.innerHTML += ".son可视宽度(clientWidth属性，不包括左右边框)："+son.clientWidth+"<br/>";
		data.innerHTML += ".son可视高度(clientHeight属性，不包括上下边框)："+son.clientHeight+"<br/>";
		data.innerHTML += "<h3>获取.grandson滚动大小和可视大小</h3>";
		data.innerHTML += ".grandson滚动宽度(scrollWidth属性)："+grandson.scrollWidth+"<br/>";
		data.innerHTML += ".grandson滚动高度(scrollHeight属性)："+grandson.scrollHeight+"<br/>";
		data.innerHTML += ".grandson可视宽度(clientWidth属性，不包括竖直滚动条和border)："+grandson.clientWidth+"<br/>";
		data.innerHTML += ".grandson可视高度(clientHeight属性，不包括水平滚动条和border)："+grandson.clientHeight+"<br/>";
		data.innerHTML += "<h3>获取.grandson被卷去的大小(跟滚动条的位置有关)</h3>";
		data.innerHTML += ".grandson被卷去的高(scrollTop属性，竖直滚动条滑到最底端)："+grandson.scrollTop+"<br/>";
		data.innerHTML += ".grandson被卷去的左(scrollLeft属性，水平滚动条滑到最右端)："+grandson.scrollLeft+"<br/>";
		data.innerHTML += "<h3>获取浏览器窗口位置(跟窗口大小有关)</h3>";
		/*
		*IE、Chrome、Safari、Opera 都提供了支持 window.screenLeft 和 *window.screenTop，但是Firxfox不支持这个两个属性；
		*Firxfox、Chrome、Safari、Opera 都提供了支持 window.screenX *和 window.screenY，但是 IE 不支持这个两个属性；
		*/
		var leftPos = (typeof window.screenLeft == 'number')?window.screenLeft:window.screenX;
		var topPos = (typeof window.screenTop == 'number')?window.screenTop:window.screenY;
		data.innerHTML += "body网页正文部分上(window.screenTop(Y))："+ topPos+"<br/>";
		data.innerHTML += "body网页正文部分左(window.screenLeft(X))："+ leftPos+"<br/>";
		data.innerHTML += "<h3>获取屏幕分辨率</h3>";
		data.innerHTML += "屏幕分辨率的高(window.screen.height)："+ window.screen.height+"<br/>";
		data.innerHTML += "屏幕分辨率的宽(window.screen.width)："+ window.screen.width+"<br/>";
		data.innerHTML += "<h3>获取屏幕可用的高宽</h3>";
		data.innerHTML += "屏幕分辨率的高(window.screen.availHeight)："+ window.screen.availHeight+"<br/>";
		data.innerHTML += "屏幕分辨率的宽(window.screen.availWidth)："+ window.screen.availWidth+"<br/>";
		data.innerHTML += "<h3>获取.father的边框大小</h3>";
		data.innerHTML += ".father上边框(clientTop)："+ father.clientTop+"<br/>";
		data.innerHTML += ".father左边框(clientLeft)："+ father.clientLeft+"<br/>";
		data.innerHTML += "<h3>获取.son到父元素边界的距离(即对应margin+父元素对应的border)</h3>";
		data.innerHTML += ".son到父元素上边界(offsetTop)："+ son.offsetTop+"<br/>";
		data.innerHTML += ".son到父元素左边界(offsetLeft)："+ son.offsetLeft+"<br/>";
	}
</script>
</head> 
<body> 
	<div class="father" id="father">
		<h3>这是父元素，屏幕分辨率是1366*768</h3>
		<div class="son" id="son">
			<h3>这是子元素，祝大家国庆快乐 </h3>
			<div class="grandson" id="grandson">
				<h3>这是孙子元素，祝大家国庆快乐 </h3>
				<h3>我的博客:3water.com</h3>
				<h3>程序爱好者QQ群:</h3>
				<h3>259280570 </h3>
				<h3>欢迎你加入 </h3>
				<h3>国庆快乐 </h3>
			</div>
		</div>
	</div>
	<div class="data">
		<h3>数据输出</h3>
		<div id="data"></div>
	</div>
</body> 
</html>

JavaScript中获取高度和宽度函数总结

- Author -

junjie

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript下操作css的float属性的特殊写法
Aug 22 Javascript
Js从头学起（基本数据类型和引用类型的参数传递详细分析）
Feb 16 Javascript
jQuery学习笔记之jQuery构建函数的7种方法
Jun 03 Javascript
jquery操作checked属性以及disabled属性的多种方法
Jun 20 Javascript
angularjs表格分页功能详解
Jan 21 Javascript
JS组件Bootstrap dropdown组件扩展hover事件
Apr 17 Javascript
移动端js图片查看器
Nov 17 Javascript
在一个页面重复使用一个js函数的方法详解
Dec 26 Javascript
BootStrap+Mybatis框架下实现表单提交数据重复验证
Mar 23 Javascript
jquery图片放大镜效果
Jun 23 jQuery
Vue内容分发slot(全面解析)
Aug 19 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
May 06 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
Oct 08 #Javascript
JavaScript中获取样式的原生方法小结
Oct 08 #Javascript
吐槽一下我所了解的Node.js
Oct 08 #Javascript
Node.js 的异步 IO 性能探讨
Oct 08 #Javascript
JS中的form.submit()不能提交表单的错误原因
Oct 08 #Javascript
js数值计算时使用parseInt进行数据类型转换(jquery)
Oct 07 #Javascript
js交换排序 冒泡排序算法（Javascript版）
Oct 04 #Javascript
晶体管(2) 春雷3P7(1) 耳机(1) ICF-2010(1) BOSE(2) 77A(2) MOTOROLA(1) 音箱(1) 单管机(1) 收信机(3)
You might like
PHP下打开URL地址的几种方法小结
2010/05/16 PHP
PHP下操作Linux消息队列完成进程间通信的方法
2010/07/24 PHP
PHP URL路由类实例
2013/11/12 PHP
php输出xml必须header的解决方法
2014/10/17 PHP
PHP集成百度Ueditor 1.4.3
2014/11/23 PHP
ThinkPHP3.2.2实现持久登录(记住我)功能的方法
2016/05/16 PHP
深入理解php printf() 输出格式化的字符串
2016/05/23 PHP
JavaScript中常用的运算符小结
2012/01/18 Javascript
基于javascript滚动图片具体实现
2013/11/18 Javascript
JS删除字符串中重复字符方法
2014/03/09 Javascript
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
2015/04/06 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
2015/06/05 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
2016/01/06 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
2017/01/03 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
2017/04/13 Javascript
利用 spin.js 生成等待效果(js 等待效果)
2017/06/25 Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
2018/06/26 Javascript
JavaScript函数的4种调用方法实例分析
2019/03/05 Javascript
node.JS路径解析之PATH模块使用方法详解
2020/02/06 Javascript
python爬虫使用cookie登录详解
2017/12/27 Python
python爬虫 爬取超清壁纸代码实例
2019/08/16 Python
通过实例解析python描述符原理作用
2020/01/22 Python
Django用户身份验证完成示例代码
2020/04/03 Python
django 数据库 get_or_create函数返回值是tuple的问题
2020/05/15 Python
如何利用Python给自己的头像加一个小国旗（小月饼）
2020/10/02 Python
pycharm 实现光标快速移动到括号外或行尾的操作
2021/02/05 Python
Numpy ndarray 多维数组对象的使用
2021/02/10 Python
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
2017/08/15 HTML / CSS
应届毕业生通用的自荐书范文
2014/02/07 职场文书
学雷锋演讲稿
2014/03/04 职场文书
《小猪家的桃花树》教学反思
2014/04/11 职场文书
捐助倡议书范文
2014/04/15 职场文书
新党章的学习心得体会
2014/11/07 职场文书
2014年班长个人工作总结
2014/11/14 职场文书
2015年见习期工作总结
2014/12/12 职场文书
Android自定义scrollview实现回弹效果
2022/04/01 Java/Android