web前端：jquery获取元素各种宽高及页面宽高总结

作者:星空下的boys更新于： 2020-02-28 11:10:35

　　jQuery是一个快速、简洁的Javascript框架，是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是"writeLess，DoMore"，即倡导写更少的代码，做更多的事情。

　　window.onload=function(){

　　vara=$("#div").width(),//width()返回元素的宽高，不包括padding/border/margin

　　b=$("#div").innerWidth(),//innerWidth()返回元素的宽高+padding

　　c=$("#div").outerWidth(),//outerWidth()返回元素的宽高+padding+border

　　d=$("#div").outerWidth(true);//outerWidth(true)返回元素宽高+padding+border+margin

　　console.log(a,b,c,d);

　　}

　　浏览器当前窗口文档body的高度：

　　$(document.body).height();

　　浏览器当前窗口文档body的宽度：

　　$(document.body).width();

　　获取滚动条到顶部的垂直高度(即网页被卷上去的高度)

　　$(document).scrollTop();

　　获取滚动条到左边的垂直宽度：

　　$(document).scrollLeft();

　　获取或设置元素的宽度：

　　$(obj).width();

　　获取或设置元素的高度：

　　$(obj).height();

　　某个元素的上边界到body最顶部的距离：obj.offset().top;（在元素的包含元素不含滚动条的情况下）

　　某个元素的左边界到body最左边的距离：obj.offset().left;（在元素的包含元素不含滚动条的情况下）

　　返回当前元素的上边界到它的包含元素的上边界的偏移量：obj.offset().top（在元素的包含元素含滚动条的情况下）

　　返回当前元素的左边界到它的包含元素的左边界的偏移量：obj.offset().left（在元素的包含元素含滚动条的情况下）

　　开发时遇到的问题：

　　内容高度不够，底部上移问题

　　解决方案：

　　判断内容高度差多少，施加在底部的margin-top上：

　　vargap=document.documentElement.clientHeight-$("footer").height()-$("header").height();

　　if(gap>$(".container").height()){

　　$("footer").css({

　　"margin-top":gap-$(".container").height()+"px"

　　})

　　}

　　运行jQuery所需的条件很简单:一台计算机、一个智能电话或一个可以运行现代浏览器的设备。jQuery对浏览器的要求也相当自由。