下载安卓APP箭头
箭头给我发消息

客服QQ:3315713922

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

作者:星空下的boys     来源: https://www.cnblogs.com/guoliangstar/p/11321480.html点击数:657发布时间: 2020-02-28 11:10:38

标签: jQueryJavaScriptPrototype

Web开发

  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对浏览器的要求也相当自由。

赞(12)
踩(0)
分享到:
华为认证网络工程师 HCIE直播课视频教程