元素偏移量offset系列

offset翻譯過來，就是偏移量，我們使用offset系列相關屬性，可以動態的得到該元素的位置（偏移）、大小等。

offset系列常用屬性：

offset系列屬性

作用element.offsetparent

返回作為該元素帶有定位的父級，如果父級都沒有定位，則返回body

element.offsettop

返回元素相對帶有定位父元素上方的偏移

element.offsetleft

返回元素相對帶有定位父元素左邊框的偏移

element.offsetwidth

返回自身包括padding、邊框、內容區的寬度，返回數值不帶單位

element.offsetheight

返回自身包括padding、邊框、內容區的高度，返回數值不帶單位

offset

style

offset可以得到任意樣式表中的樣式值

style只能得到行內樣式表的樣式值

offset系列獲得的數值是沒有單位的

style.width獲得的是帶有單位的字串

offsetwidth包含padding+border+width

style.width獲得不包含padding和border的值

offsetwidth等屬性是唯讀屬性，只能獲取不能賦值

style.width是可讀寫屬性，可以獲取也可以賦值

所以，我們想要獲取元素大小位置，用offset更合適

所以，我麼想要給元素更改值，則需要用style改變

案例分析：

1.點選彈出層，模態框和遮罩層就會顯示出來display:block;

2.點選關閉按鈕，模態框和遮罩層就會隱藏起來display:none;

3.在頁面中拖拽的原理：滑鼠按下並且移動，之後鬆開滑鼠；

4.觸發事件是滑鼠按下mousedown,滑鼠移動mousemove，滑鼠鬆開mouseup；

5.拖拽過程：滑鼠移動過程中，獲得最新的值賦值給模態框的left和top值，這樣模態框就可以跟著滑鼠走了；

6.滑鼠按下觸發的事件源是最上面一行，就是id為title

7.滑鼠的座標減去滑鼠在盒子裡的座標，才是模態框真正的位置。

1

點選，彈出登入框23
登入會員4關閉
5678
使用者名稱：910
1112
登入密碼：
1314
1516
登入會員
1718
1920
21

京東放大鏡效果：

1 window.addeventlistener('load', function

() );
10     preview_img.addeventlistener('mouseout', function
() );
14//
2.滑鼠移動的時候，讓黃色盒子跟著滑鼠來走
15     preview_img.addeventlistener('mousemove', function
(e)  else
if (maskx >=maskmax) 
31if (masky <= 0)  else
if (masky >=maskmax) 
36         mask.style.left = maskx + 'px';
37         mask.style.top = masky + 'px';
38//
大的移動距離 = 遮擋層移動距離 * 大最大移動距離 / 遮擋層的最大移動距離
39var bigimg = document.queryselector('.bigimg');
40//
大的移動距離
41var bigmax = bigimg.offsetheight -big.offsetwidth;
42//
大的移動距離
43var bigx = maskx * bigmax /maskmax;
44var bigy = masky * bigmax /maskmax;
45         bigimg.style.left = -bigx + 'px';
46         bigimg.style.top = -bigy + 'px';
47})
48 })

元素偏移量 offset系列

offset 翻譯過來就是偏移量，我們使用offset 系列相關屬性可以動態的得到改元素的位置 偏移 大小等。offset系列屬性 作用element.offsetparent 返回作為該元素帶有定位的父級元素 如果父級都沒有定位則返回body element.offsettop 返回元素相對帶有定...

元素偏移量offset系列

1.可以得到元素的偏移 位置 返回的數值不帶單位 console.log f.offsettop console.log f.offsetleft 它以帶有定位的父親為準 如果沒有父親或父親沒有定位則以body為準 console.log s.offsetleft 2.可以得到元素的大小 寬度和高度...

1 元素偏移量 offset

1 得到元素位置 offsettop 返回帶有定位父元素 上方的偏移 offsetleft 返回帶有定位父元素 左方的偏移 如果父元素沒有定位 以body為基準 2 得到元素大小 offsetwidth 返回自身 寬度 offsetheight 返回自身 高度 返回值不帶單位 包含 邊框 內邊距 內...