首页
所有分类
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实例教程(19) 使用HoTMetal(3)
Dec 23 Javascript
Dom操作之兼容技巧分享
Sep 20 Javascript
文本框根据输入内容自适应高度的代码
Oct 24 Javascript
关于javascript中的typeof和instanceof介绍
Dec 04 Javascript
js与jquery回车提交的方法
Feb 03 Javascript
jquery实现带缩略图的可定制高度画廊效果（5种）
Aug 28 Javascript
基于原生JS实现图片裁剪
Aug 01 Javascript
你真的了解BOM中的history对象吗
Feb 13 Javascript
angular.js指令中的controller、compile与link函数的不同之处
May 10 Javascript
取消Bootstrap的dropdown-menu点击默认关闭事件方法
Aug 10 Javascript
简述vue路由打开一个新的窗口的方法
Nov 29 Javascript
js闭包和垃圾回收机制示例详解
Mar 01 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
SSH(3) 时钟(1) 数据表(1) data(4) mysql(6) 2022年7月新番(1) Vscode(3) character(1) 字符集(1) OVERLORD(1)
You might like
PHP数字格式化
2006/12/06 PHP
phpexcel导出excel的颜色和网页中的颜色显示不一致
2012/12/11 PHP
利用PHP实现图片等比例放大和缩小的方法详解
2013/06/06 PHP
详解php语言最牛掰的Laravel框架
2017/11/20 PHP
jquery根据name属性查找的小例子
2013/11/21 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
2013/12/11 Javascript
12行javascript代码绘制一个八卦图
2015/04/02 Javascript
实例解析jQuery中proxy()函数的用法
2016/05/24 Javascript
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
2016/07/07 Javascript
ionic实现滑动的三种方式
2016/08/27 Javascript
js利用clipboardData实现截屏粘贴功能
2016/10/12 Javascript
two.js之实现动画效果示例
2017/11/06 Javascript
JavaScript+H5实现微信摇一摇功能
2018/05/23 Javascript
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
2019/11/05 Javascript
vue实现短信验证码登录功能（流程详解）
2019/12/10 Javascript
javascript实现搜索筛选功能实例代码
2020/11/12 Javascript
vue实现广告栏上下滚动效果
2020/11/26 Vue.js
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
2020/12/19 Vue.js
Python对两个有序列表进行合并和排序的例子
2014/06/13 Python
python3 pillow生成简单验证码图片的示例
2017/09/19 Python
浅谈Python Opencv中gamma变换的使用详解
2018/04/02 Python
点球小游戏python脚本
2018/05/22 Python
python数据持久存储 pickle模块的基本使用方法解析
2019/08/30 Python
在pytorch中实现只让指定变量向后传播梯度
2020/02/29 Python
pytorch随机采样操作SubsetRandomSampler()
2020/07/07 Python
使用纯 CSS 创作一个脉动 loader效果的源码
2018/09/28 HTML / CSS
html5调用app分享功能示例（WebViewJavascriptBridge）
2018/03/21 HTML / CSS
TripAdvisor瑞典：全球领先的旅游网站
2017/12/11 全球购物
Java中采用什么结构来捕获、处理异常？各子句的顺序、功能如何
2013/10/07 面试题
竞选班长演讲稿
2013/12/30 职场文书
泸县召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
2014年学生会干事工作总结
2014/11/07 职场文书
2014年乡镇人大工作总结
2014/11/25 职场文书
2014年初级职称工作总结
2014/12/08 职场文书
辞职信格式范文
2015/05/13 职场文书
68句权威创业名言
2019/08/26 职场文书