js相關筆記(十四)

2022-08-27 02:24:08 字數 1767 閱讀 6798

1.給元素新增非靜態定位的定位屬性時,你如果不設定它的left和top或者bottom再或者right屬性時,他就裝作以標準文件流的方式找個位置待著,但是它的確不佔空間,很像是左浮動,也許非靜態定位不設定left、top、right、bottom屬性時就等於float:left;,定位的時候left、top、right、bottom屬性不會計算非靜態定位的父容器的邊框,而是從父容器去除邊框之後才正式開始計算的,但是自己如果是有邊框的話,會以自己邊框最外層作為left、top、right、bottom的起始點也就是(0,0)點,會以這個點與父容器去除邊框後的(0,0)點重合,只再根據left、top、right、bottom來確定位置。

2.offsetwidth和offsetheight表示盒子真實的寬度高度,這個真實的寬度包括 四周的邊框、四周的padding、及定義的寬度高度或內容撐開的高度和寬度,可以用來檢測盒子實際的大小,屬性也是唯讀不可寫的,返回的是不帶單位的數值,返回值為number型別。

3.offsetleft和offsettop表示當前盒子在定位後距離定位了的父容器的左偏移與上偏移,該屬性是唯讀的不能寫,如果父容器沒有定位屬性(主要是非靜態定位),那麼就以距離自己最近的父系的非靜態定位的盒子為基準,其實和樣式中的非靜態定位一樣的,實在找不到就以瀏覽器的起始點為基準,所以也許瀏覽器的起始點是用了非靜態定位的,offsetleft和offsettop如果在當前盒子沒有定位時,那麼就預設一瀏覽器的起始點為基準了,返回的是不帶單位的數值,返回值為number型別。。

4.offsetparent表示當前盒子距離最近的父系非靜態的定位盒子元素,offsetparent返回的是乙個元素節點,如果父系盒子中都沒有非靜態定位,那麼就預設返回body節點了。

5.offsetleft和style.left的區別

◆offsetleft唯讀,style.left可讀可寫。

◆在沒有設定行內樣式定位等屬性時,style.left能獲取到的只是空字串,而offsetleft能夠獲取真實的偏移值。

◆在設定了行內樣式定位等屬性時,style.left獲取到的只是帶有單位的字串如果200px,而offsetleft獲取還是真實的偏移值如200,offsetleft獲取到的是number型別的數字。

◆offsetleft在當前盒子不處於定位的狀態下也能夠針對瀏覽器的起始點來確定偏移值,而style.left在那個時候只能夠獲取空字串。

★相同點,在定位的時候二者一樣的,都不會去計算非靜態定位的父容器的邊框,無論邊框多大,都是從padding開始算起的,那個時候style.left去掉單位轉換為數字就等於offsetleft了。

6.其實使用offset家族的屬性配合style物件,可以製作乙個賽馬的小遊戲,offset.left和style.left。

7. 谷歌瀏覽器的小bug,就是當你給頁面元素定位為0時,你會發現,如果讓style.left增加,第二次的時候,你會發現offsetleft會比style.left多1,這個bug會導致動畫比你預期的要難,就是根本停不下來。

8.在使用定時器的時候,最好讓每乙個定時器的編號都獨立起來,這樣就不容易出現關閉定時器時把別的定時器給關掉了,如給被乙個元素弄乙個timer屬性,當給這個元素設定定時器時就能夠讓這個元素獨享乙個定時器了,不會把其它定時器給關掉,定時器的編號timer不要是全域性的,否則就會出現關閉定時器時把最後乙個定時器關閉,而其他定時器無法關閉。

9.輪播的本質就是來回移動的位置,無縫輪播其實是多加了一張在最後面,當你切換到最後一張時,最後一張再往後切換時,實際上會瞬間切換到第一張然後再繼續切換勻速切換到第二張,因為最後一張和第一張一模一樣,所以瞬間切換的過程根本看不出來,所以就像很完整的無縫輪播了。

js相關筆記(十一)

1.陣列的那些遍歷方法foreach map filter every some,在ie678中不存在,dom物件的屬性操作方法getattribute setattribute removeattribute在ie678中也不存在,通過控制台列印的時候發現,返回的是乙個object型別的 也就是空...

js相關筆記(十六)

1.同時設定html,body,ul,li的width 100 height 100 會讓li繼承佔滿一整頁空間,因為這個時候html body ul li的寬度和高度都是預設佔滿一整頁,無論怎麼放大縮小,都是預設佔滿一整頁。2.在觸發dom上的某個事件的時候,會產生乙個事件物件event,這個物件...

js相關筆記(十五)

1.offset取值返回時乙個number型別的數值,但是它不會返回帶小數的整數,內部做了四捨五入的處理,如style.left 9.4px,offsetleft獲取到的值是9,然而style.left 9.5px,offsetleft獲取到的值是10。2.勻速動畫的原理 this.style.le...