jQuery中的寬度和高度計算

DOM中寬度高度:
        
           window的寬度高度:表明着瀏覽器的有效可見區域的寬度高度,即瀏覽器工具欄和任務欄之間的區域,它會隨着最大化最小化或改變窗口尺寸的變化而變化,它表明着「視界」。


         document的寬度高度:表明着網頁的實際寬度和高度。它和window的寬度和高度的區別咱們能夠打個比喻來形容---document比如一張報紙,window比如一個方形的放大鏡,咱們必須透過這個方形的放大鏡來看報紙,報紙的大小是固定的,而咱們這個方形的放大鏡的尺寸倒是可調的。 css

jQuery中的位置計算:


            .width()innerWidth()outerWidth() 方法: 計算jQuery對象的寬度,它們之間的區別在因而否把padding、margin計算在內,所以它們的值width() <= innerWidth() <= outerWidth() 。


            .scrollLeft()方法: 計算橫向捲簾大小,比如放大鏡(window)的左邊框到報紙(document)的左邊緣的距離。


            .offset().Left: 計算jQuery對象相對於document的左邊距,至關於報紙的某個專欄距離報紙的左邊緣的距離。因此說.scrollLeft()和offset().Left有點類似,都是計算到報紙(document)左邊緣的距離,不一樣的是計算的對象不一樣一個是window,一個是普通的元素


            .height()innerHeight()outerHeight()方法,計算jQuery對象的高度,它們之間的區別參考上面提到的width()方法。


            .scrollTop()方法,計算垂直捲簾高度,比如放大鏡(window)的上邊框到報紙(document)的上邊緣。


            .offset().Top,計算jQuery對象相對於document的上邊距。具體參考上面提的offset().Left


            event.pageXevent.pageY,事件發生時鼠標的位置,此位置相對於document。


設置jQuery對象的位置:


            offset方法能夠設置對象的位置,可是本人的使用實踐發現效果不佳,能夠使用.css()方法設置元素的位置,若是要設置多個css屬性,能夠傳入一個map形式的參數如:{width:"300px",height:"25px"}

瀏覽器

相關文章
相關標籤/搜索