欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript中獲取高度和寬度函數(shù)總結

 更新時間：2014年10月08日 09:59:53   投稿：junjie  
這篇文章主要介紹了JavaScript中獲取高度和寬度函數(shù)總結,例如獲取視窗大小、可見區(qū)域寬、可見區(qū)域高、獲取元素自身大小等,很方便的一個總結,需要的朋友可以參考下

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.dbjr.com.cn</h3>
                 <h3>程序愛好者QQ群:</h3>
                 <h3>259280570  </h3>
                 <h3>歡迎你加入 </h3>
                 <h3>國慶快樂  </h3>
             </div>
         </div>
     </div>
     <div class="data">
         <h3>數(shù)據(jù)輸出</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可見區(qū)域寬: "+document.body.clientWidth+"<br/>";
         data.innerHTML += "document.body可見區(qū)域高: "+document.body.clientHeight+"<br/>";
         data.innerHTML += "window.innerWidth可見區(qū)域寬: "+window.innerWidth+"<br/>";
         data.innerHTML += "window.innerHeight可見區(qū)域高: "+window.innerHeight+"<br/>";
         data.innerHTML += "document.documentElement可見區(qū)域寬: "+document.documentElement.clientWidth+"<br/>";
         data.innerHTML += "document.documentElement可見區(qū)域高: "+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網(wǎng)頁正文部分上(window.screenTop(Y))："+ topPos+"<br/>";
         data.innerHTML += "body網(wǎng)頁正文部分左(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：瀏覽器對盒子的解析存在差異，所以以上得出的數(shù)據(jù)也會存在小小差異。附圖一張。

完整代碼：

<!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可見區(qū)域寬: "+document.body.clientWidth+"<br/>";
		data.innerHTML += "document.body可見區(qū)域高: "+document.body.clientHeight+"<br/>";
		data.innerHTML += "window.innerWidth可見區(qū)域寬: "+window.innerWidth+"<br/>";
		data.innerHTML += "window.innerHeight可見區(qū)域高: "+window.innerHeight+"<br/>";
		data.innerHTML += "document.documentElement可見區(qū)域寬: "+document.documentElement.clientWidth+"<br/>";
		data.innerHTML += "document.documentElement可見區(qū)域高: "+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網(wǎng)頁正文部分上(window.screenTop(Y))："+ topPos+"<br/>";
		data.innerHTML += "body網(wǎng)頁正文部分左(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.dbjr.com.cn</h3>
				<h3>程序愛好者QQ群:</h3>
				<h3>259280570 </h3>
				<h3>歡迎你加入 </h3>
				<h3>國慶快樂 </h3>
			</div>
		</div>
	</div>
	<div class="data">
		<h3>數(shù)據(jù)輸出</h3>
		<div id="data"></div>
	</div>
</body> 
</html>

相關文章

  • FireFox的getYear的注意事項

    FireFox的getYear的注意事項

    FireFox的getYear的注意事項...
    2007-04-04
  • javascript設計模式之單體模式學習筆記

    javascript設計模式之單體模式學習筆記

    這篇文章主要為大家詳細介紹了javascript設計模式之單體模式學習筆記，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2017-02-02
  • 利用JavaScript如何查詢某個值是否數(shù)組內

    利用JavaScript如何查詢某個值是否數(shù)組內

    這篇文章主要給大家介紹了關于利用JavaScript如何查詢某個值是否數(shù)組內的相關資料，文中通過示例代碼分別介紹了實現(xiàn)該問題的一些解決方法是否可行，需要的朋友可以參考借鑒，下面跟著小編來一起學習學習吧。
    2017-07-07
  • zTree樹形插件異步加載方法詳解

    zTree樹形插件異步加載方法詳解

    這篇文章主要為大家詳細介紹了zTree樹形插件異步加載的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2017-06-06
  • echarts實現(xiàn)3d柱狀圖的2種方式舉例

    echarts實現(xiàn)3d柱狀圖的2種方式舉例

    echarts3D效果柱狀圖的實現(xiàn),這個太難了,我花了兩天終于調成我想要的效果啦,要是官網(wǎng)上有例子就好了,太難調了,下面這篇文章主要給大家介紹了關于echarts實現(xiàn)3d柱狀圖的2種方式,需要的朋友可以參考下
    2023-02-02
  • js實現(xiàn)聊天對話框

    js實現(xiàn)聊天對話框

    這篇文章主要為大家詳細介紹了js實現(xiàn)聊天對話框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-02-02
  • JavaScript實現(xiàn)單圖片上傳并預覽功能

    JavaScript實現(xiàn)單圖片上傳并預覽功能

    這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)單圖片上傳并預覽功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2019-09-09
  • Webpack?ECMAScript?模塊詳解

    Webpack?ECMAScript?模塊詳解

    ECMAScript 模塊（ESM）是在 Web 中使用模塊的規(guī)范， 所有現(xiàn)代瀏覽器均支持此功能，同時也是在 Web 中編寫模塊化代碼的推薦方式，這篇文章主要介紹了Webpack?ECMAScript?模塊,需要的朋友可以參考下
    2023-12-12
  • JavaScript promise的使用和原理分析

    JavaScript promise的使用和原理分析

    Promise 是一個 ECMAScript 6 提供的類，目的是更加優(yōu)雅地書寫復雜的異步任務。由于 Promise 是 ES6 新增加的，所以一些舊的瀏覽器并不支持，蘋果的 Safari 10 和 Windows 的 Edge 14 版本以上瀏覽器才開始支持 ES6 特性
    2023-04-04
  • bootstrap的常用組件和柵格式布局詳解

    bootstrap的常用組件和柵格式布局詳解

    Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，用于開發(fā)響應式布局、移動設備優(yōu)先的 WEB 項目，本文介紹了bootstrap的常用組件和柵格式布局詳解，有興趣的可以了解一下
    2017-05-05

最新評論