首页
所有分类
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父窗口控制只弹出一个子窗口
Apr 10 Javascript
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
Dec 21 Javascript
jquery子元素过滤选择器使用示例
Jun 24 Javascript
JS写的贪吃蛇游戏(个人练习)
Jul 08 Javascript
给事件响应函数传参数的四种方式小结
Dec 05 Javascript
查找页面中所有类为test的结点的方法
Mar 28 Javascript
javascript正则表达式定义（语法）总结
Jan 08 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
Apr 19 Javascript
使用JQuery中的trim()方法去掉前后空格
Sep 16 Javascript
清除js缓存的多种方法总结
Dec 09 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
Feb 13 Javascript
JavaScript类的继承方法小结【组合继承分析】
Jul 11 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
音频(1) mp3Play(1) Tkinter(4) 数据处理(2) 矩阵(1) 数组(5) apply(1) GUI(2) agg(1) pandas(7)
You might like
php存储过程调用实例代码
2013/02/03 PHP
PHP封装的分页类与简单用法示例
2019/02/25 PHP
使用PHP开发留言板功能
2019/11/19 PHP
基于jquery的兼容各种浏览器的iframe自适应高度的脚本
2010/08/13 Javascript
js遍历、动态的添加数据的小例子
2013/06/22 Javascript
jQuery的控件及事件(输入控件及回车事件)使用示例
2013/07/25 Javascript
如何在JavaScript中实现私有属性的写类方式(二)
2013/12/04 Javascript
instanceof和typeof运算符的区别详解
2014/01/06 Javascript
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
2015/10/27 Javascript
js只执行1次的函数示例
2016/07/20 Javascript
jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
2016/09/05 Javascript
微信小程序与php 实现微信支付的简单实例
2017/06/23 Javascript
微信小程序wepy框架笔记小结
2018/08/08 Javascript
详解webpack4之splitchunksPlugin代码包分拆
2018/12/04 Javascript
解决node-sass偶尔安装失败的方法小结
2018/12/05 Javascript
如何解决webpack-dev-server代理常切换问题
2019/01/09 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
2019/01/20 Javascript
在vue中使用setInterval的方法示例
2019/04/16 Javascript
JS中超越现实的匿名函数用法实例分析
2019/06/21 Javascript
vue通过过滤器实现数据格式化
2020/07/20 Javascript
一行JavaScript代码如何实现瀑布流布局
2020/12/11 Javascript
Python迭代用法实例教程
2014/09/08 Python
Python实现的桶排序算法示例
2017/11/29 Python
Python基础之条件控制操作示例【if语句】
2019/03/23 Python
Python中print和return的作用及区别解析
2019/05/05 Python
使用 Python 读取电子表格中的数据实例详解
2020/04/17 Python
jupyter notebook中新建cell的方法与快捷键操作
2020/04/22 Python
python用tkinter实现一个简易能进行随机点名的界面
2020/09/27 Python
html5中为audio标签增加停止按钮动作实现方法
2013/01/04 HTML / CSS
成绩单公证书
2014/04/10 职场文书
优秀党员学习焦裕禄精神思想汇报范文
2014/09/10 职场文书
法人代表证明书格式
2014/10/01 职场文书
学历证明样本
2015/06/16 职场文书
2015年小学教师培训工作总结
2015/07/21 职场文书
预备党员入党思想汇报（范文）
2019/08/14 职场文书
浅谈Redis 中的过期删除策略和内存淘汰机制
2022/04/03 Redis