首页
所有分类
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 相关文章推荐
document.getElementById为空或不是对象的解决方法
Jan 24 Javascript
javascript json2 使用方法
Mar 16 Javascript
利用javascript的面向对象的特性实现限制试用期
Aug 04 Javascript
jquery固定底网站底部菜单效果
Aug 13 Javascript
JS判断移动端访问设备并加载对应CSS样式
Jun 13 Javascript
jquery学习总结（超级详细）
Sep 04 Javascript
jQuery实现的自定义弹出层效果实例详解
Sep 04 Javascript
JS实现的简单下拉框联动功能示例
May 11 Javascript
浅谈angular表单提交中ng-submit的默认使用方法
Sep 30 Javascript
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
Vue 设置axios请求格式为form-data的操作步骤
Oct 29 Javascript
JavaScript Window浏览器对象模型原理解析
May 30 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
shell(3) 反向代理(2) 前后端分离(1) reload(1) 防盗链(1) 压力测试(1) 默认端口(3) 二级域名(1) 生成缩略图(1) 443(1)
You might like
超神学院：天使彦公认最美的三个视角，网友：我的天使快下凡吧！
2020/03/02 国漫
一些常用的php函数
2006/12/06 PHP
php防盗链的常用方法小结
2010/07/02 PHP
PHP中的异常处理机制深入讲解
2020/11/10 PHP
Avengerls vs Newbee BO3 第二场2.18
2021/03/10 DOTA
accesskey 提交
2006/06/26 Javascript
通过Javascript创建一个选择文件的对话框代码
2012/06/16 Javascript
javascript中文本框中输入法切换的问题
2013/12/10 Javascript
window.print打印指定div实例代码
2013/12/13 Javascript
B/S模式项目中常用的javascript汇总
2013/12/17 Javascript
js 日期比较相关天数代码
2014/04/02 Javascript
JavaScript中的Math 使用介绍
2014/04/21 Javascript
Javascript数组与字典用法分析
2014/12/13 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
2015/03/20 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
2015/09/18 Javascript
Vue.js2.0中的变化小结
2017/10/24 Javascript
vue几个常用跨域处理方式介绍
2018/02/07 Javascript
对Vue beforeRouteEnter 的next执行时机详解
2018/08/25 Javascript
微信小程序上线发布流程图文详解
2019/05/06 Javascript
vue中node_modules中第三方模块的修改使用详解
2019/05/31 Javascript
在Python操作时间和日期之asctime()方法的使用
2015/05/22 Python
浅谈python抛出异常、自定义异常, 传递异常
2016/06/20 Python
Python tkinter模块中类继承的三种方式分析
2017/08/08 Python
Python爬虫学习之获取指定网页源码
2019/07/30 Python
python爬虫刷访问量 2019 7月
2019/08/01 Python
python将邻接矩阵输出成图的实现
2019/11/21 Python
django xadmin action兼容自定义model权限教程
2020/03/30 Python
Python BeautifulReport可视化报告代码实例
2020/04/13 Python
Python正则re模块使用步骤及原理解析
2020/08/18 Python
选购世界上最好的美妆品：Cult Beauty
2017/11/03 全球购物
医学生实习自我鉴定
2013/09/27 职场文书
财务部总监岗位职责
2014/03/12 职场文书
财务管理专业毕业生求职信
2014/06/02 职场文书
社区维稳工作方案
2014/06/06 职场文书
公安派出所所长四风问题个人对照检查材料
2014/10/04 职场文书
讨论nginx location 顺序问题
2022/05/30 Servers