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"}

浏览器

相关文章
相关标签/搜索