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

2024-09-28 16:29:58

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>我的博客:www.jb51.net</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：浏览器对盒子的解析存在差异，所以以上得出的数据也会存在小小差异。附图一张。

完整代码：

<!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>我的博客:www.jb51.net</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获取隐藏元素(display:none)的高度和宽度的方法

js获取可见元素的尺寸还是比较方便的,这个可以直接使用这个方法: 复制代码代码如下: function getDefaultStyle(obj,attribute){ // 返回最终样式函数,兼容IE和DOM,设置参数:元素对象.样式特性 return obj.currentStyle?obj.currentStyle[attribute]:document.defaultView.getComputedStyle(obj,false)[attribute];} 但是如果这个元素是隐藏(dis
js获取Html元素的实际宽度高度的方法

第一种情况就是宽高都写在样式表里,就比如#div1{width:120px;}.这中情况通过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度. 第二种情况就是宽和高是写在行内中,比如style="width:120px;",这中情况通过上述2个方法都能拿到宽度. 小结,因为id.offsetWidth和id.offsetHeight无视样式写在样式表还是行内,所以我们获取元素宽和高的时候最好用这2个属性.注意如果不是写在行内styl
JS获取各种宽度、高度的简单介绍

有时候项目中会用到用js获取元素位置来定位元素,首先通过图片说明scrollWidth,clientWidth,offsetWidth的关系. JS获取各种宽度.高度的简单介绍: scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 of
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)

网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) 网页正文全文宽:document.body.scrollWidth 网页正文全文高:document.body.scrollHeight 网页被卷去的高:document.body.scr
js获取页面及个元素高度、宽度的代码

网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offsetWidth (包括边线和滚动条的宽); 网页可见区域高: document.body.offsetHeight (包括边线的宽); 网页正文全文宽: document.body.scrollWidth; 网页正文全文高: document.body.scrollHeight; 网页被卷去的高(f
JavaScript中获取高度和宽度函数总结

html代码: 复制代码代码如下: <body> <div class="father" id="father"> <h3>这是父元素,屏幕分辨率是1366*768</h3> <div class="son" id="son"> <h3>这是子元素,祝大家国庆快乐 </h3&g
JavaScript中获取元素索引的函数

这是我在写结构/表现/行为完全分离的选项卡(jQ版和原生JS版)一文时发现的问题. 今天一个朋友也问到我这个问题, 这个函数的确很实用. 和大家分享一下我的实现方法. 代码: 复制代码代码如下: function index(current, obj){ for (var i = 0; i < obj.length; i++) { if (obj[i] == current) { return i; } } } 原理: 通过一个for循环遍历找出当前集合中与当前元素相等的元素,那么该元素的下标
javascript中获取class的简单实现

js中没有获取class的办法,找了一些封装好的方法,这里整理一下 (1)先进行封装 //封装getClass function getClass(tagName,className) //获得标签名为tagName,类名className的元素 { if(document.getElementsByClassName) //支持这个函数 { return document.getElementsByClassName(className); } else { var tags=document
JavaScript中常见的字符串操作函数及用法汇总

本文实例总结了JavaScript中常见的字符串操作函数及用法.分享给大家供大家参考.具体分析如下: 最近几次参加前端实习生招聘的笔试,发现很多笔试题都会考到字符串的处理,比方说去哪儿网笔试题.淘宝的笔试题等.如果你经常参加笔试或者也是一个过来人,相信你也跟我一样,发现字符串的处理是前端招聘过程中最常见的题型之一.这些题有一个特点,站在考官的角度去考虑,它考的不是你会不会,而是你能不能在不借用XX手册或者XX指南再或者百度谷歌的情况下,用比较简洁的方式写出答案来.可惜的是,很多开发人员,当然我也
Javascript中获取对象的原型对象的方法小结

在Javascript中,如果我们有一个对象但是又不知道它的构造函数时,如何获取它的原型对象呢? 在Chrome中或是FireFox浏览器中,我们可以直接使用对象的__proto__属性获取它的原型对象. 复制代码代码如下:  function F(){}; var foo = new F(); alert(foo.__proto__ == F.prototype); 但是,__proto__属性在IE浏览器中一直到IE11才被支持. 那么在不支持__pro
Javascript中带名匿名箭头函数的重要区别(推荐)

带名函数是指函数显示地给出了一个名字的函数,function abs(x){}.匿名函数是指函数只带有function这个关键字,而没有像abs这种函数名称的函数,如function(){}.ES6标准新增了一种新的函数:Arrow Function(箭头函数)箭头函数表面上相当于匿名函数,并且简化了函数定义.它们各自的区别是什么呢? 1 带名和匿名函数的区别区别:匿名函数需要讲地址赋值给另一个变量let a,然后再用a来调用函数:而带名函数因为显示地给出了函数名称,所以可以直接用这个函数名称
javascript中获取元素标签中间的内容的实现方法

使用ajax,通过会把服务器端响应获取到reponseText或者reponseXML中的信息,以某种方法动态的写到div和span标记中,这样,可以在无刷新的情况下,改变页面内容的显示. 通过javascript进行动态的修改,修改的方法有两种: 1. 一种是使用html的每个标记的innerHTML属性,使用此属性,只要为它提供一个有意义的html代码片段,那么html解释器就可以将其中的内容进行解释,并显示在页面上,使用这种方式比较简单,每次修改前不需要先把原来的内容清除掉,而可以直接进行
javascript 中iframe高度自适应（同域）实例详解

javascript 中iframe高度自适应(同域) 今天解决了iframe高度自适应的问题,不过这只是同域下的页面嵌入,以下是代码: function SetCwinHeight(){ var iframeid = document.getElementById("frame"); //frame是iframe的id if (document.getElementById) { if (iframeid && !window.opera) { if (iframei
深入理解Javascript中的自执行匿名函数

格式: (function(){ //代码 })(); 解释:这是相当优雅的代码(如果你首次看见可能会一头雾水:)),包围函数(function(){})的第一对括号向脚本返回未命名的函数,随后一对空括号立即执行返回的未命名函数,括号内为匿名函数的参数. 来个带参数的例子: (function(arg){ alert(arg+100); })(20); // 这个例子返回120. 回来看看jquery的插件编写 (function($) { // Code goes here })(jQuery
javascript中利用柯里化函数实现bind方法【推荐】

• 柯理化函数思想:一个js预先处理的思想:利用函数执行可以形成一个不销毁的作用域的原理,把需要预先处理的内容都储存在这个不销毁的作用域中,并且返回一个小函数,以后我们执行的都是小函数,在小函数中把之前预先存储的值进行相关的操作处理即可: • 柯里化函数主要起到预处理的作用: • bind方法的作用:把传递进来的callback回调方法中的this预先处理为上下文context; /** * bind方法实现原理1 * @param callback [Function] 回调函数 * @par

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

相关推荐

随机推荐