您的位置：首页 > Web前端 > JQuery

JS / jQuery宽高的理解和应用

2016-12-13 11:12 225 查看

一、window和document的区别是什么？

（1）Window对象表示浏览器中打开的窗口

（2）Window对象可以省略 alert(); === window.alert();

（3）Document对象是Window对象的一部分

（4）浏览器的HTML文档成为Document对象

二、window.location和document.location一样吗？

（1）window对象的location属性引用的是Location对象，表示该窗口中当前显示文档的URL

（2）document对象的location属性引用的也是Location对象

（3）window.location === document.location

三、与window相关的宽高

（1）window.innerWidth

（2）window.innerHeight

（3）window.outerWidth

（4）Window.outerHeight

window.outerHeight和window.innerHeight

window.outerWidth和window.innerWidth

（5）window.screen（window.screen对象包含有关用户屏幕的信息）

window.screen.height

window.screen.width

window.screen.availHeight （屏幕可利用高度）

window.screen.availWidth （屏幕可利用宽度）

window.screenTop

window.screenLeft

四、与document相关的宽高

（1）与client相关的宽高

clientWidth （可视部分宽度，即padding+content）

假如无padding无滚动（clientWidth=style.width）

假如有padding无滚动（clientWidth=style.width+style.padding）

假如有padding有滚动（clientWidth=style.width+style.padding-滚动轴宽度）

clientHeight （可视部分高度，即padding+content）

（2）与offset相关的宽高

document.body.offsetWidth （指的是元素的 border+padding+content的宽度）

假如无padding无滚动无border （offsetWidth=clientWidth=style.width）

假如有padding无滚动有border （offsetWdith=style.width+style.padding+style.border offsetWidth=clientWidth+style.border）

假如有padding有滚动有border （offsetWidth=style.width+style.padding+style.border offsetWidth=client.Width+滚动轴宽度+style.border）

document.body.offsetHeight （指的是元素的border+padding+content的高度）

document.body.offsetLeft

document.body.ofsetTop

（3）与scroll相关的宽高

当给定宽高小于浏览器窗口时

scrollWdith通常是浏览器窗口的宽度

scrollHeight通常是浏览器窗口的高度

当给定宽高大于浏览器窗口，且内容小于给定宽高时

scrollWidth通常是指给定的宽度+其所有的margin、padding和border

scrollHeight通常是指给定的高度+其所有的margin、padding和border

当给定宽高大于浏览器窗口，且内容大于给定宽高时

scrollWidth通常是指内容的宽度+其所有的margin、padding和border

scrollHeight通常是指内容的高度+其所有的margin、padding和border

scrollLeft 和 scrollTop （可读写）

五、documentElement 和 body的关系

        html中若头文件<!doctype html>中的html或html2.0等未声明的话，在某些浏览器中利用document.documentElement拿不到可视区域的宽高度，此时直接利用document.body

在不同浏览器都实用的Javascript方案：

         var w=document.documentElement.clientWidth || document.body.clientWidth ;

         var h=document.documentElement.clientHeight || docuemnt.body.clientHeight ;

六、Event对象的5种坐标

1、clientX 和 clientY             相对于浏览器（可视区域，左上角0,0）的坐标

2、screenX 和 screenY 相对于设备屏幕左上角（0,0）的坐标

3、offsetX 和 offsetY            相对于事件源左上角（0,0）的坐标

4、pageX 和 pageY    相对于整个网页左上角（0,0）的坐标

5、x 和 y                             本来是IE属性，相对于用CSS动态定位的最内层包容元素

注意：设置position值尝试

七、js各种宽高的应用

（1）可视区域预加载

getBoundingClientRect() 函数可以直接获得div顶部到浏览器顶部的距离

（2）网页滚动到顶部或底部时实行加载

（3）div滚动到底部加载

八、jQuery各种宽高的应用

（1）可视区域预加载

（2）网页滚动到顶部或底部时实行加载

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery 函数获取数据 javascript

相关文章推荐

新的分享

章节导航