DOM之元素定位

js實現的大多數特效都需要定位元素，而定位元素不外乎以下幾類屬性：offset、client、scroll。通過合理使用這些屬性，即可輕鬆實現各種js動態效果了。

一　　offset類

offset 即元素偏移量，該類屬性主要用來動態的獲取元素的偏移和大小等。

1，距離父元素的偏移

offsetparent：獲取有定位屬性的父元素。

offsettop / offsetleft：獲取元素距離有定位的父元素（上/左邊框）的偏移量。如果沒有帶定位屬性的父元素，那麼以 body （瀏覽器可視區）為準。

html**：

1

<
style
>
2.father
9.son
15style
>
16<
div 
class
="father"
>
17<
div 
class
="son"
>
div>
18div
>

js**：

1

var f = document.queryselector('.father'),
2      s =document.queryselector('.son');
34 s.offsetparent; //
div.father
5 s.offsettop; //
206 s.offsetleft: //307
//注意：offset 返回的數字，沒有單位

2，自身的寬高

offsetwidth / offsetheight

1 s.offsetwidth; //

802 s.offsetheight; //703
//注意：offsetwidth/height獲取的是元素 content+padding+border的尺寸，不包含margin

這兩個屬性獲取的是元素在頁面是中的絕對寬高，不包含被 overflow 屬性隱藏的內容部分。

3，動態性

所謂動態的獲取，是指：當我們 css 使用百分比，em 或者 rem 作為單位時，隨著螢幕尺寸的變化，元素的實際大小也會隨著變化，然而該屬性依然能夠正確的計算出元素的實際尺寸。

1

<
style
>
2div
5style
>
6<
body
>
7<
div>
div>
8<
script
>
9var
odiv 
=document.queryselector(
'div');
10odiv.offsetwidth;
//會動態的返回元素的寬度
11script
>
12div
>

二　　client類

client 系列屬性用於獲取元素可視區域相關資訊，它可以動態的獲取元素的邊框大小，元素大小等。

html 部分：

1

<
style
>
2div
9style
>
10<
body
>
11<
div>
div>
12body
>

1，邊框大小

通過 clienttop / clientleft 獲取元素上邊框/左邊框大小。

1

var odiv = document.queryselector('div');
2 odiv.clienttop; //
103 odiv.clientleft; //104
//返回數字，不帶單位

js 只提供了獲取上邊框和左邊框大小的方法，如果想獲取下邊框和有邊框的大小，需要做做減法了：offset 寬高減去左或上邊框，再減去下面將要講到的可視區大小。

2，可視區大小

通過 clientwidth / clientheight 獲取元素可視區大小，包含內容區和 padding，不包含 border 和 margin。

1 odiv.clientwidth; //

4602 odiv.clientheight; //
460

三　　scroll

scroll 類屬性用於動態獲取元素內容區實際大小，及當元素內容超出盒子大小並出現滾動條時，元素滾動的距離。

html 部分：

112

1314
1516

內容區放置的 div 超出了父元素的大小，設定 overflow:scroll 屬性，使父元素出現滾動條。

1，滾動距離

scrolltop / scrollleft 用於獲取元素往下和 往右滾動的距離（出現滾動條時）。

1

element.scrolltop;
2element.scroolleft;3//
當元素內容區出現滾動條時，可以使用他們獲取滾動距離
4window.pagexoffset;
5window.pageyoffset;6//
當整個頁面出現滾動條時，可以使用這兩個屬性獲取頁面的滾動距離

2，實際內容區大小

scrollwidth / scrollheight 用於獲取元素內容區實際的寬高，包含內容區和 padding，不包含 border 和 margin。即使內容區被 overflow 隱藏，該屬性依然能正確獲取到實際大小。

1

var wrap = document.queryselector('.wrap');
2 wrap.scrollwidth; //
8003 wrap.scrollheight; //
2400

通過 scroll 類屬性可以輕鬆實現自定義滾動條的功能。

DOM元素的定位

寫js程式的時候，經常碰到了定位的問題。但每次都看到一半，找到需要的屬性就了事了。寬度 高度 jquery elem width 獲取css定義的寬度jquery elem height 獲取css定義的高度clientwidth width paddingclientheight height p...

CSS之元素定位

css中元素定位有如下情況 1 流 靜態定位 預設 position static 不能指定位置 2 浮動定位 float left right 不能嚴格指定位置 3 相對定位 position relative 使用left top right bottom進行定位，仍占用頁面空間 以 其自己的靜...

Selenium之元素定位

1.檢視頁面元素 id class type name等。2.通過webdriver的方法定位 絕對路徑 find element by xpath html body div 1 div 1 div div 1 div form span 1 input 相對路徑 find element by ...