JavaScript DOM位置尺寸API

dinfer 發布于2019-08-23 12:51 / 626人閱讀

摘要：我們需要了解幾個基礎概念，每個元素都有下列屬性為了理解這些屬性，我們需要知道元素的實際內容有可能比分配用來容納內容的盒子更大，因此可能會出現滾動條，內容區域是視口，當實際內容比視口大的時候，需要把元素的滾動條位置考慮進去。

我們需要了解幾個基礎概念，每個HTML元素都有下列屬性

offsetWidth      clientWidth     scrollWidth

offsetHeight     clientHeight    scrollHeight

offsetLeft       clientLeft      scrollLeft

offsetTop        clientTop       scrollTop

為了理解這些屬性，我們需要知道HTML元素的實際內容有可能比分配用來容納內容的盒子更大，因此可能會出現滾動條，內容區域是視口，當實際內容比視口大的時候，需要把元素的滾動條位置考慮進去。

clientHeight和clientWidth用于描述元素內尺寸，是指元素內容+內邊距大小，不包括邊框（IE下實際包括）、外邊距、滾動條部分

offsetHeight和offsetWidth用于描述元素外尺寸，是指元素內容+內邊距+邊框，不包括外邊距和滾動條部分

clientTop和clientLeft返回內邊距的邊緣和邊框的外邊緣之間的水平和垂直距離，也就是左，上邊框寬度

offsetTop和offsetLeft表示該元素的左上角（邊框外邊緣）與已定位的父容器（offsetParent對象）左上角的距離

offsetParent對象是指元素最近的定位（relative,absolute）祖先元素，遞歸上溯，如果沒有祖先元素是定位的話，會返回null

云服務器 GPU云服務器 javascript_dom_api dom元素位置 javascript dom javascript dom 編程藝術

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/99046.html

JavaScript DOM位置尺寸API

摘要：我們需要了解幾個基礎概念，每個元素都有下列屬性為了理解這些屬性，我們需要知道元素的實際內容有可能比分配用來容納內容的盒子更大，因此可能會出現滾動條，內容區域是視口，當實際內容比視口大的時候，需要把元素的滾動條位置考慮進去。我們需要了解幾個基礎概念，每個HTML元素都有下列屬性 offsetWidth clientWidth scrollWidth offsetHe...

moven_j 2019-08-02 11:55 評論0 收藏0
高性能JavaScript閱讀簡記（二）

摘要：訪問集合元素時使用局部變量對于任何類型的訪問，如果對同一個屬性或者方法訪問多次，最好使用一個局部變量對此成員進行緩存。三、DOM Scripting DOM編程我們都知道對DOM操作的代價昂貴，這往往成為網頁應用中的性能瓶頸。在解決這個問題之前，我們需要先知道什么是DOM，為什么他會很慢。 DOM in the Browser World 瀏覽器中的DOM DOM是一個獨立于語言...

RaoMeng 2019-08-01 17:20 評論0 收藏0
高性能JavaScript閱讀簡記（二）

摘要：訪問集合元素時使用局部變量對于任何類型的訪問，如果對同一個屬性或者方法訪問多次，最好使用一個局部變量對此成員進行緩存。三、DOM Scripting DOM編程我們都知道對DOM操作的代價昂貴，這往往成為網頁應用中的性能瓶頸。在解決這個問題之前，我們需要先知道什么是DOM，為什么他會很慢。 DOM in the Browser World 瀏覽器中的DOM DOM是一個獨立于語言...

coolpail 2019-08-20 18:31 評論0 收藏0
你不知道的瀏覽器頁面渲染機制

摘要：前言瀏覽器的內核是指支持瀏覽器運行的最核心的程序，分為兩個部分的，一是渲染引擎，另一個是引擎。渲染引擎在不同的瀏覽器中也不是都相同的。接下來就是瀏覽器的渲染過程。布局完成后，瀏覽器會立即發出和事件，將渲染樹轉換成屏幕上的像素。前言瀏覽器的內核是指支持瀏覽器運行的最核心的程序，分為兩個部分的，一是渲染引擎，另一個是JS引擎。渲染引擎在不同的瀏覽器中也不是都相同的。目前市面上常見的瀏覽...

aboutU 2019-08-19 11:36 評論0 收藏0