js相關筆記(十五)

2022-08-27 02:24:10 字數 3731 閱讀 4214

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

2.勻速動畫的原理:this.style.left=this.offsetleft+步長(也就是每次遞增多少遞減多少),步長的遞增和遞減取決於 指定的位置是大於當前位置還是小於當前位置。

3.緩速動畫的原理:this.style.left=this.offsetleft+步長,這個步長是動態的,speed=(指定的位置-this.offsetleft)/10,因為只有這樣 速度才會從快慢,但是可能會出現 當步長過小時,this.offsetleft從this.style.left**獲取到的值被四捨五入了,然後造成永遠達不到指定的位置並且定時器也無法清除,解決的方法時,每次都對步長進行向上或者向下取捨

【//每次移動的步長

element.spend = (target - element.offsetleft) / 10

//對步長進行取整,避免offsetleft底層的四捨五入的影響

element.spend = element.spend > 0 ? math.ceil(element.spend) : math.floor(element.spend);

】,這樣就能夠達到,當步長大於0就向上取整,就不擔心offsetleft四捨五入掉0.5以下的值了,如果步長為負數時,也能夠做到-0.5直接向下取整變成-1,於是就解決了指定的位置小於當前位置而造成的不移動並且定時器不停的問題,判斷當前的位置和指定的位置是否符合停止定時器的核心**是

【//目標位置減去當前位置的絕對值 如果小於步長的絕對值 那麼就說明也就一步之遙了,

// 那麼直接移動到指定的位置清除計時器算了。

if (math.abs(target - element.offsetleft) <= math.abs(element.spend))

】,都是判斷左右步長是否小於或者等於當前位置距離指定位置的長度,如果符合條件那麼可以直接停止計時器了,這一點無論是勻速還是緩速動畫都是一樣的。

4.滾動事件是onscroll,只要滾動1px就會觸發這個事件。

5.scrollwidth表示元素的內容寬度加上padding,不包括border和margin,scrollheight表示元素的內容高度和padding,當內容小於盒子定義的高度時scrollheight就是盒子定義的高度加上padding,主要是以元素內容的高度和padding來決定大小的,注意在ie7及以下scrollheight只有元素的內容的高度和padding來決定大小,就算內容的高度小於盒子定義的高度時scrollheight也還是盒子內容的高度加上padding。

6.scrolltop表示縱向移動滾動條時上邊被卷去的距離,一般是用於body,document.body.scrolltop,但是相容性不是很好,scrollleft表示橫向移動滾動條時左邊被卷去的距離,一般是用於body,document.body,scrollleft,但是相容性不是很好。

7.dtd表示文件約束,就是瀏覽器需要遵循的一些新的規則,瀏覽器遵守了新的規則之後就可能會出現之前的**出現相容性的問題,但是瀏覽器遵守了新的規則之後,就會出現相容性更好的**,如宣告了dtd之後document.body.scrolltop在任何瀏覽器都不能用了包括ie9及以下,因為在新的規則中不允許使用document.body.scrolltop獲取滾動時上邊被卷去的距離,只能夠使用document.documentelement.scrolltop。

8.在html中有宣告了dtd(或者其它標籤之上的標記)時 document.body.scrolltop就沒有效果了,在任何瀏覽器都沒有效果,但是在沒有宣告dtd時,document.body.scrolltop除了ie9及其以下不能用,其它瀏覽器都可以用,當然也會在一些類似ie9及以下的老版本的瀏覽器不能用。

9.在html中有宣告了dtd(或者其它標籤之上的標記)時 在任何瀏覽器使用document.documentelement.scrollleft 和document.documentelement.scrolltop都會返回具體的值(包括ie9及其以下),但是在沒有宣告dtd時,只有ie(任何版本)瀏覽器能夠獲取到具體的值,其它瀏覽器的返回值都是0,所以宣告了dtd的重要性一覽無餘。

10.無論有沒有宣告dtd,在ie9及以上和其它主流瀏覽器上,都可以使用另一種方式來獲取被卷去的距離,也就是window.pageyoffset和window.pagexoffset,這兩個乙個是獲取縱向被卷去的距離和橫向被卷去的距離,window.pageyoffset在ie678中返回值是undefined,最好的相容寫法是 :

window.pageyoffset||document.body.scrolltop ||document.documentelement.scrolltop

。11.在ie9及其版本之下的或者類似的瀏覽器,無論有沒有宣告dtd(或者其它標籤之上的標記),document.body.scrolltop和document.body.scrollleft都只會返回0,但是無論有沒有宣告了dtd(或者其它標籤之上的標記),document.documentelement.scrollleft和document.documentelement.scrolltop 在ie任何版本的瀏覽器上都能夠獲取具體的值,當然有宣告dtd時這兩個可以獲取到所有瀏覽器的具體的值,於是相容性寫法是:

◆document.body.scrollleft ||document.documentelement.scrollleft

◆document.body.scrollleft +document.documentelement.scrollleft

★最好的還是:window.pageyoffset||document.body.scrolltop ||document.documentelement.scrolltop

12.html基本結構訪問方法

◆獲取title標籤的方式:document.title

◆獲取head標籤的方式:document.head

◆獲取body標籤的方式:document.body

◆獲取html標籤的方式:document.documentelement

12.所以上面的document.body.scrolltop和document.documentelement.scrolltop,其實就是不同瀏覽器認為是body在滾動還是html在滾動而導致的相容性問題出現的原因,後來一致決定了window.pagexoffset,不是body在動也不是html在動,是頁面在動,但是由於瀏覽器要向下相容,所以以前的屬性還是在用也在更新。

13.判斷是否宣告的dtd,backcompat表示未宣告,css1compat表示已經宣告,判斷的方式是:

◆document.compatmode==="backcompat"注意大小寫。

14.scroll相容性封裝【

function scroll() ;

}else if (document.compatmode === "backcompa") ;

}else ;}}

else ;

}//        //精簡版封裝只需要返回 這個就是上面判斷的精簡 效果一樣

//        return }】

15.建立新元素比轉殖元素要慢。

16.設定大為背景時,不要直接是設定寬度,設定為100%,然後再設定的背景定位為 background-position:top center,這樣儘管再大,都會是居中顯示的,的長度等於當前文件的可見寬度,背景定位從的中間開始,所以就居中了。

js相關筆記(十一)

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

js相關筆記(十四)

1.給元素新增非靜態定位的定位屬性時,你如果不設定它的left和top或者bottom再或者right屬性時,他就裝作以標準文件流的方式找個位置待著,但是它的確不佔空間,很像是左浮動,也許非靜態定位不設定left top right bottom屬性時就等於float left 定位的時候left ...

js相關筆記(十六)

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