首頁 >web前端 >js教程 >js的offset是什麼意思及使用詳解

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

小云云
小云云原創
2018-03-27 17:01:3213183瀏覽

offset的意思是“偏離、位移”,在js中屬於一個系列屬性,包括有“offsetHeight”、“offsetWidth”、“offsetLeft”、“offsetTop”、“offsetParent”;它們可以用於取得元素尺寸。

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  只能得到行內樣式的數值

相關推薦:

php中offset特徵造成繞過漏洞解決方法

JS中offset與勻速動實例分析

mysql分頁時offset過大的Sql最佳化實例分享

以上是js的offset是什麼意思及使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn