js的offset是什么意思及使用詳解

offset家族

1, offsetWidth offsetHeight 得到對象的寬和高(自己的寬和高)

offsetWidth = width + border + padding;
 offsetHeight = height + border + padding;
 p.style.width 只能得到行內樣式的數值

2, offsetLeft和offsetTop 返回距離上級盒子(帶有定位)的左邊和上邊的位置,

如果父級沒有定位, 則以body為準, 這里的父級指的是所有上一級, 不僅僅是父親,

offsetLeft 從父親的padding開始算, 父親的border不算

3, 動畫緩動公式

 var start=0, end = 0;
 setInterval(function(){
 start = start + (end - start)/10;
 }, 30);

4, offsetParent 返回對象的父級(帶有定位的父級) 和parentNode類似, 沒有定位時, 返回body

區別:parentNode一定是父親, offsetParent可以是爸爸, 爺爺等

5, offsetTop, offsetLeft和style.top, style.left的區別

5.1 offsetTop, offsetLeft可以是沒有定位的盒子距離上邊或者左側的位置

5.2 style.top, style.left只有定位的盒子, 才有top或者left

5.3 offsetTop返回的是數字, 而style.top返回的是字符串, 除了數字外還有單位:px

5.4 offsetTop 只讀, 而style.top可讀寫

5.5 如果沒有給html元素指定過top樣式, 則 style.top返回的是空字符串

5.6 style.width 只能得到行內樣式的數值

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com