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

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
， 获取高度
， 获取宽度
函数总结
javascript 获取宽度、javascript 获取高度、获取屏幕的宽度和高度、获取img的高度和宽度、js获取图片高度和宽度，以便于您获取更多的相关知识。

时间： 2024-11-10 10:39:19

JavaScript中获取高度和宽度函数总结_javascript技巧的相关文章

JavaScript中获取纯正的undefined的方法_javascript技巧

1.为什么要获取undefined? 因为undefined在javascript中不是保留字,可以被用户当做变量来赋值,这样如果我们后期需要用到undefined来检测一个变量的话,那么检测的值就不准确了: 举个栗子: var undefined=10; function sum(a,b){ if(a===undefined||b===undefined){ console.log("参数不正确"); }18101130357 return a+b; } sum(10,10)->

在JavaScript中获取请求的URL参数[正则]_javascript技巧

第一种方法:,代码比较专业 推荐 复制代码 代码如下: <script> function GetLocationParam(param){ var request = { QueryString : function(val) { var uri = window.location.search; var re = new RegExp("" +val+ "=([^&?]*)", "ig"); return ((uri.ma

JavaScript中提前声明变量或函数例子_javascript技巧

如题所示,看下面的示例. (可以使用Chrome浏览器,然后F12/或者右键,审查元素.调出开发者工具,进入控制台console输入) (使用技巧: 控制台输入时Shift+Enter可以中途代码换行) 复制代码 代码如下: var name = "xiaoming"; (function(){   var name = name || "小张";   console.info(name); })();// 小张 (function(){   name = name

JavaScript中获取鼠标位置相关属性总结_javascript技巧

javascript并没有mouse对象,获取鼠标坐标要靠强大的event对象. 我们通过监听document的mousemove,就可以实时获得鼠标位置. 但是!!event中和鼠标相关的属性太多了,很让人头大!如下: event.layerX event.layerY event.clientX event.clientY event.pageX event.pageY event.offsetX event.offsetY event.screenX event.screenY event

JavaScript中获取样式的原生方法小结_javascript技巧

ps:是获取样式,不是设置样式.若没有给元素设置样式值,则返回浏览器给予的默认值.(论坛整理) 1.element.style:只能获取写在元素标签中的style属性里的样式值,无法获取到定义在<style></style>和通过<link href="css.css">加载进来的样式属性 复制代码 代码如下: var ele = document.getElementById('ele'); ele.style.color;    //获取颜色 2

javascript中的return和闭包函数浅析_javascript技巧

高手绕道!这跟闭包本身没什么大的关系,也不知道怎么取标题,随便凑了个数,望见谅! 今天一个刚学js的朋友给了我一段代码问为什么方法不执行,代码如下: 复制代码 代码如下: function makefunc(x) { return function (){  return x; }}alert(makefunc(0)); 其实不是不执行,只是朋友的意思这里alert出来的应该是"0",而不是function (){return x;}.不是脚本写错了,只是没搞懂return,从当前函数

JavaScript中获取未知对象属性的代码_javascript技巧

这两天尝试写个AjaxToolkit:AsyncFileUpload的Demo, 它有个OnClientUploadComplete属性可以关联客户端JS, 于是可以写OnClientUploadComplete="uploadComplete", 然后定义uploadComplete方法: 复制代码 代码如下: function uploadComplete(sender, e) { //Do something here... } 但是, 怎么从e获得上传文件的信息呢? 除了看Aj

JavaScript中window.open用法实例详解_javascript技巧

本文较为详细的分析了JavaScript中window.open用法.分享给大家供大家参考.具体如下: 复制代码 代码如下: <script LANGUAGE="javascript"> window.open ('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no,resizable=no,location=no, sta

JavaScript中Window对象的属性及事件_javascript技巧

Window 对象 Window 对象表示浏览器中打开的窗口. 如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象. 注释:没有应用于 window 对象的公开标准,不过所有浏览器都支持该对象. windows对象属性 属性 描述 closed 返回窗口是否已被关闭. defaultStatus 设置或返回窗口状态栏中的默认文本. document 对 Document 对象的只读引用.请