DOM元素的定位

2021-06-16 10:47:41 字數 1888 閱讀 3762

寫js程式的時候,經常碰到了定位的問題。但每次都看到一半,找到需要的屬性就了事了。

寬度、高度

jquery(』#elem』).width()   // 獲取css定義的寬度jquery(』#elem』).height()  // 獲取css定義的高度clientwidth = width + paddingclientheight = height + padding

offsetwidth = width + padding + border

offsetheight = height + padding + border

scrollwidth  // 物件的滾動寬度

scrollheight  // 物件的滾動高度

clientleft  // borderleftwidth

clienttop  // bordertopwidth

left、top

scrolltop  // 物件左邊界和視窗中目前可見內容的最左端之間的距離scrollleft  // 物件最頂端和視窗中可見內容的最頂端之間的距離offsettop  // 距相對父節點的頂端位置offsetleft  // 距相對父節點的左側位置

父節點parentnode  // 就是父節點。從結構上理解並應用它。offsetparent  // 是相對父節點。從布局上理解並應用它。滑鼠相對於瀏覽器的 x, y 座標

e.clientx, e.clienty

滑鼠相對於觸發事件容器的 x,y 座標
e.offsetx, e.offsety  // for iee.layerx, e.layery  // for ff

垂直方向滾動的值

document.documentelement.scrolltop

document.body.scrolltop (quirks mode)

滑鼠相對於頁面頂部的 x, y 座標

pagex, pagey  // for ff

e.clientx + document.documentelement.scrollleft  // for ie

e.clienty + document.documentelement.scrolltop  // for ie

相對於body的padding以內的絕對座標

DOM之元素定位

js實現的大多數特效都需要定位元素,而定位元素不外乎以下幾類屬性 offset client scroll。通過合理使用這些屬性,即可輕鬆實現各種js動態效果了。一 offset類 offset 即元素偏移量,該類屬性主要用來動態的獲取元素的偏移和大小等。1,距離父元素的偏移 offsetparen...

關於DOM元素定位屬性的深入學習

寬度 高度 jquery elem width 獲取css定義的寬度 jquery elem height 獲取css定義的高度 clientwidth width padding clientheight height padding offsetwidth width padding borde...

DOM 獲得元素定位父級及距離

dom節點 node.offsetparent最近的有定位屬性的祖先節點 如果祖先節點都沒有定位,那麼預設為body node.offsetleft node.offsettop 最近的有定位屬性的祖先節點的距離 node.offsetleft左外邊框到定位父級的左內邊框的距離 node.offse...