JS中位置與大小的取得方法-js教程-PHP中文網

首頁

web前端

js教程

JS中位置與大小的取得方法

高洛峰

Dec 06, 2016 am 10:05 AM

scrollHeight,clientHeight,offsetHeight的區別

說明：

scrollHeight：DOM元素的實際內容的高度，不包border的高度，會隨DOM元素中內容的增加(超過可視區後)而變大。

clientHeight：DOM元素內容視覺區的高度，不包含捲軸和邊框的高度。

offsetHeight：DOM元素整體的高度，包括捲軸和邊框。

JS中位置與大小的取得方法

當滾動條不出現的時候

這時候DOM元素中沒有內容或內容不超過可視區
scrollWidth=clientWidth，兩者皆為可視區的寬度。
scrollHeight=clientHeight,兩者皆為可視區域的高度。
offsetWidth、offsetHeight為DOM元素的整體寬度與高度。

當滾動條出現的時候

這時候DOM元素中沒有內容或內容不超過可視區
scrollWidth>clientWidth
scrollHeight>clientHeight
scrollWidth和prollHeTrollHeight內容視覺區的寬度和高度
offsetWidth、offsetHeight為DOM元素的整體寬度和高度。

Demo

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>正确理解和运用与尺寸大小相关的DOM属性</title>
    <style type="text/css">
    html,body {margin: 0;}
    body {padding: 100px;}
  #box {
    overflow: scroll;
    width: 400px;
    height: 300px;
    padding: 20px;
    border: 10px solid #000;
    margin: 0 auto;
    box-sizing: content-box;
    /*
    box-sizing:content-box表示元素的宽度与高度不包括内边距与边框的宽度和高度
    box-sizing:border-box表示元素的宽度与高度包括内边距与边框的宽度和高度
     */
  }
  #box2 {
    border: 1px solid #000;
 
  }
    </style>
  </head>
  <body>
  <div id="box">
    <div id="box2">谷歌浏览器测试结果</div>
  </div>
  <script type="text/javascript">
  //offsetWidth ，offsetHeight对应的是盒模型的宽度和高度
  //scrollWidth，与scrollHeight对应的是滚动区域的宽度和高度，但是不包含滚动条的宽度！滚动区域由padding和content组成。
  //clientWidth，clientHeight对应的是盒模型除去边框后的那部分区域的宽度和高度，不包含滚动条的宽度
    var boxE=document.getElementById("box");
    var box=document.getElementById("box2");
    //对于scrollWidth没有发生横向的溢出，同时由于overflow: scroll的原因，scrollWidth 跟clientWidth相同，但是没有包含滚动条的宽度
    console.log(&#39;scrollWidth:&#39; + boxE.scrollWidth);//423
    console.log(&#39;scrollHeight:&#39; + boxE.scrollHeight);//672
 
    //clientWidth与clientHeight分别等于offsetWidth与offsetHeight减掉相应边框（上下共20px，左右共20px）和滚动条宽度后的值（chrome下滚动条宽度为17px）；
    console.log(&#39;clientWidth:&#39; + boxE.clientWidth);//423=460-20-17
    console.log(&#39;clientHeight:&#39; + boxE.clientHeight);//323=360-20-17
 
    //offsetWidth与offsetHeight与chrome审查元素看到的尺寸完全一致
    console.log(&#39;offsetWidth :&#39; + boxE.offsetWidth);//460=width+padding+border
    console.log(&#39;offsetHeight:&#39; + boxE.offsetHeight);//360=height+padding+border
  </script>
  </body>
</html>

利用JS取得DOM元素的大小

取得html根元素：document.documentElement

取得body元素：document.body

取得頁面視覺區的寬度與高度，不包含捲軸FF、chrome中採用：

使用document.documentElement.clientWidth和document.documentElement.clientHeight
注意：ie6標準模式下，上述方式可以

在混雜模式下：

ie6使用document. clientHeight

注意： window.innerWidth/Height是包含捲軸的寬度和高度的。這也與document.documentElement.clientWidth/Height的區別所在。
所以在使用的時候注意相容寫法：

Demo

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>页面视口宽高</title>
</head>
<body>
  <script type="text/javascript">
  //标准模式
  var w=document.documentElement.clientWidth;
  var h=document.documentElement.clientHeight;
  console.log(&#39;w宽：&#39;+w+&#39;---&#39;+&#39;h高：&#39;+h);
  //混杂模式
  var width=document.body.clientWidth;
  var height=document.body.clientHeight;
  //兼容写法
  var ww=document.documentElement.clientWidth||document.body.clientWidth;
  var hh=document.documentElement.clientHeight||document.body.clientHeight;
  console.log(&#39;ww宽：&#39;+ww+&#39;---&#39;+&#39;hh高：&#39;+hh);
  </script>
</body>
</html>

獲取一個普通html元素的大小

docE.offsetWidth;

docE.offsetHeightvar

相容性
化取條高度捲動性取得核心滾動性（.） =document.documentElement.scrollTop||document.body.scrollTop;

offsetWidth與offsetHeight

這兩個屬性表示元素的可視區的寬度和高度，這個值包括元素的邊框(border)，水平padding，垂直滾動條寬度或高度，元素本身寬度或高度等。

offsetWidth與offsetHeight這兩個屬性的值只與該元素有關，與周圍元素（父級和子級元素無關）。

offsetWidth=(border-width)*2+(padding-left)+(width)+(padding-right)

offsetHeight=(border-width)*2+(padding-top)+(height)+(padding -bottom)

offsetLeft與offsetTop

offsetLeft與offsetTop這兩個屬性值與offsetParent有關。

offsetParent屬性傳回一個物件的引用，這個物件是距離呼叫offsetParent的元素最近的（在包含層次中最靠近的），並且是已進行過CSS定位的容器元素。如果這個容器元素未進行CSS定位, 則offsetParent屬性的取值為根元素(即body元素)的參考。

兩條規則：

如果目前元素的父級元素沒有進行CSS定位（position為absolute或relative），offsetParent為body。

如果目前元素的父級元素中有CSS定位（position為absolute或relative），offsetParent取最近的那個父級元素。

offsetLeft：物件元素邊界的左上角頂點相對於offsetParent的左上角頂點的水平偏移量；

offsetTop：物件元素邊界的左上角頂點相對於offsetParent的左上角頂點的垂直偏移量；

offsetLeft=(offsetParent的padding-left)+(中間元素的offsetWidth)+(當前元素的margin-left)

offsetTop=(offsetParent的padding-top)+(中間元素的offsetHeight)+(當前元素的margin-上)

當offsetParent為body時情況比較特殊:

在IE8/9/10及Chrome中：

offsetLeft = (body的margin-left)+(body的border-width)+(body的padding-left )+(當前元素的margin-left)。

在FireFox：

offsetLeft = (body的margin-left)+(body的padding-left)+(目前元素的margin-left)

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

Python vs. JavaScript：學習曲線和易用性Apr 16, 2025 am 12:12 AM

Python更適合初學者，學習曲線平緩，語法簡潔；JavaScript適合前端開發，學習曲線較陡，語法靈活。 1.Python語法直觀，適用於數據科學和後端開發。 2.JavaScript靈活，廣泛用於前端和服務器端編程。

Python vs. JavaScript：社區，圖書館和資源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好，適合初學者，但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大，JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富，但Python適合從官方文檔開始，JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

從C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。

JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。

超越瀏覽器：現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制：1.通過Node.js實現服務器端編程，適用於高並發請求處理。 2.通過ReactNative進行移動應用開發，支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制，適用於硬件交互。

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。

See all articles