javascript中各種寬高、間距總結

DC_er 發布于2019-08-23 13:13 / 1448人閱讀

一、DOM對象 1、只讀屬性

（1）clientWidth、clientHeight： padding + content ( - scroll寬度 )
（2）offsetWidth、offsetHeight：padding + content + border
（3）clientTop、clientLeft：border的top、border的left
（4）offsetTop、offsetLeft：相對于其offsetParent上邊距離、左邊距離
概念：offsetParent是指一直往上找，第一個具有定位的父級元素
（5）scrollWidth、scrollHeight：padding + content + 不在可視區域的部分

2、可讀可寫屬性

（1）scrollTop、scrollLeft：已經被卷上去或移到左邊看不到的部分
（2）dom.style.xxx：注意：該值只能得到設置的內聯樣式的值，實際計算后展示的值需要通過window.getComputedStyle($0)（非IE）或 dom.currentstyle 獲得

二、Event事件

以下屬性的獲取：event.xx

（1）clientX、clientY：事件發生時，鼠標距離瀏覽器左上角(0,0)的距離
（2）screenX、screenY：事件發生時，鼠標距離屏幕左上角的距離
（3）offsetX、offsetY：事件發生時，鼠標距離該dom左上角的距離
（4）pageX、pageY：事件發生時，鼠標距離頁面左上角的距離。若未出現滾動條，則與clientX、clientY相等

以上內容參考JavaScript中的各種寬高以及位置總結

云服務器 GPU云服務器 javascript學習總結 java中各種布局 php中各種注釋符號 js 中各種數據類型的比較

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

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

前端入門4-CSS屬性樣式表

摘要：正文屬性樣式表正文屬性樣式表了解了具體的各種工作原理使用方式選擇器規則層疊算法等之后，那么該來學習的也就是都支持哪些屬性樣式表了。本篇文章已授權微信公眾號 dasu_Android（大蘇）獨家發布聲明本系列文章內容全部梳理自以下四個來源：《HTML5權威指南》《JavaScript權威指南》 MDN web docs Github:smyhvae/web 作為一個前端小白，入...

hss01248 2019-04-23 13:14 評論0 收藏0
css學習歸納總結（二）

摘要：子選擇器只對直接后代有影響的選擇器，而對孫子后代以及多層后代不產生作用。爛透了盡可能使用復合語法糟糕好的避免不必要的重復糟糕好的組織好的代碼格式代碼的易讀性和易維護性成正比。標簽與元素標簽和p元素有什么區別呢？大多數時候他們表示的是同一樣東西，但仍有細微的區別。、等指的是HTML分隔符，而元素則是由一對開始結束標簽構成的，用來包含某一些內容子選擇器和后代選擇器的區別：后代選擇器...

KnewOne 2019-08-28 18:00 評論0 收藏0
總結：前端開發中讓元素水平垂直居中的方法

摘要：如果要居中的塊級元素直接是內聯元素等，直接在其父級元素上加上屬性即可圖片之間，瀏覽器會產生默認的間距，父元素設置可以很好地解決這個問題。使用水平居中前提居中的元素必須是塊級元素，如果是內聯元素，需要添加屬性而且元素不浮動。前端開發中，我們經常需要對元素進行水平垂直居中。為此，小編特地總結了讓元素居中的方法。 showImg(https://segmentfault.com/img/b...

fnngj 2019-08-02 12:02 評論0 收藏0
總結：前端開發中讓元素水平垂直居中的方法

摘要：如果要居中的塊級元素直接是內聯元素等，直接在其父級元素上加上屬性即可圖片之間，瀏覽器會產生默認的間距，父元素設置可以很好地解決這個問題。使用水平居中前提居中的元素必須是塊級元素，如果是內聯元素，需要添加屬性而且元素不浮動。前端開發中，我們經常需要對元素進行水平垂直居中。為此，小編特地總結了讓元素居中的方法。 showImg(https://segmentfault.com/img/b...

douzifly 2019-08-29 17:17 評論0 收藏0
JavaScript中的各種寬高以及位置總結

摘要：和這一對屬性是用來讀取元素的的寬度和高度的。第二部分對象在中，對于元素的運動的操作通常都會涉及到對象，而對象也存在很多位置屬性，且由于瀏覽器兼容性問題會導致這些屬性間相互混淆，這里一一講解。文章轉自中的各種寬高以及位置總結在javascript中操作dom節點讓其運動的時候，常常會涉及到各種寬高以及位置坐標等概念，如果不能很好地理解這些屬性所代表的意義，就不能理解js的運動原理，同時...

microelec 2019-08-21 10:26 評論0 收藏0