jQuery中的宽度和高度计算

为什么80%的码农都做不了架构师？>>>   

DOM中宽度高度：
        
           window的宽度高度：代表着浏览器的有效可见区域的宽度高度，即浏览器工具栏和任务栏之间的区域，它会随着最大化最小化或改变窗口尺寸的变化而变化，它代表着“视界”。

         document的宽度高度：代表着网页的实际宽度和高度。它和window的宽度和高度的区别我们可以打个比喻来形容---document好比一张报纸，window好比一个方形的放大镜，我们必须透过这个方形的放大镜来看报纸，报纸的大小是固定的，而我们这个方形的放大镜的尺寸却是可调的。

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.pageX，event.pageY，事件发生时鼠标的位置，此位置相对于document。


设置jQuery对象的位置：


            offset方法可以设置对象的位置，但是本人的使用实践发现效果不佳，可以使用.css()方法设置元素的位置，如果要设置多个css属性，可以传入一个map形式的参数如：{width:"300px",height:"25px"}

转载于:https://my.oschina.net/i33/blog/117426