首页
所有分类
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 相关文章推荐
jquery插件珍藏(图片局部放大/信息提示框)
Jan 08 Javascript
JavaScript获得url所有参数键值表的方法
Mar 21 Javascript
深入理解setTimeout函数和setInterval函数
May 20 Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
Oct 13 Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 jQuery
AngulaJS路由 ui-router 传参实例
Apr 28 Javascript
vue2组件之select2调用的示例代码
Oct 12 Javascript
利用vue+elementUI实现部分引入组件的方法详解
Nov 22 Javascript
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
Vue2.0 slot分发内容与props验证的方法
Dec 12 Javascript
详解ES6 Promise的生命周期和创建
Aug 18 Javascript
在JavaScript中实现链式调用的实现
Dec 24 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
Spring JPA(1) cmd(1) 远程桌面(2) exists(2) Switch(1) mt-swipe(1) REST(1) 慢日志(1) openEuler(1) Spring Bean(1)
You might like
受疫情影响 动画《Re从零开始的异世界生活》第二季延期至7月
2020/03/10 日漫
php 文件上传代码(限制jpg文件)
2010/01/05 PHP
PHP下对数组进行排序的函数
2010/08/08 PHP
php笔记之常用文件操作
2010/10/12 PHP
PHP伪造来源HTTP_REFERER的方法实例详解
2015/07/06 PHP
php基于jquery的ajax技术传递json数据简单实例
2016/04/15 PHP
PHP实现微信申请退款功能
2018/10/01 PHP
php curl发送请求实例方法
2019/08/01 PHP
JavaScript基本概念初级讲解论坛贴的学习记录
2009/02/22 Javascript
基于jQuery的ajax功能实现web service的json转化
2009/08/29 Javascript
常见JS验证脚本汇总
2015/12/01 Javascript
AngularJs Javascript MVC 框架
2016/06/20 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
2017/04/26 Javascript
BootStrap 表单控件之单选按钮水平排列
2017/05/23 Javascript
Angular5升级RxJS到5.5.3报错：EmptyError: no elements in sequence的解决方法
2018/04/09 Javascript
Angular如何在应用初始化时运行代码详解
2018/06/11 Javascript
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
2018/09/01 Javascript
Vue脚手架编写试卷页面功能
2020/03/17 Javascript
[47:38]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python中的一些陷阱与技巧小结
2015/07/10 Python
django初始化数据库的实例
2018/05/27 Python
Python数据可视化教程之Matplotlib实现各种图表实例
2019/01/13 Python
python3实现字符串操作的实例代码
2019/04/16 Python
Python与C/C++的相互调用案例
2021/03/04 Python
夏洛特和乔治婴儿和儿童时装精品店：Charlotte and George
2018/06/06 全球购物
乌克兰最大的家用电器和电子产品连锁店：Eldorado
2019/10/02 全球购物
Fabletics官网：美国运动服饰品牌，由好莱坞女演员凯特·哈德森创立
2019/10/19 全球购物
顶撞老师检讨书
2014/02/07 职场文书
工厂采购员岗位职责
2014/04/08 职场文书
学习教师敬业奉献模范事迹材料思想汇报
2014/09/19 职场文书
2014新生大学四年计划书
2014/09/21 职场文书
党员教师群众路线对照检查材料思想汇报
2014/09/29 职场文书
村官2015年度工作总结
2015/10/14 职场文书
大学生，三分钟即兴演讲稿
2019/07/22 职场文书
实用干货：敬酒词大全，帮你应付各种场合
2019/11/21 职场文书
Golang 实现 WebSockets 之创建 WebSockets
2022/04/24 Golang