浅谈jQuery宽高及其应用

【前言】

      今天讲了讲jQuery各种元素宽高的获取和设置，下面简单总结下，希望对各位小伙伴有所帮助

 

【主体】

      补充知识点：

             （1）width()返回结果无单位，css("width")的结果有单位

             （2）普通元素可以读写，但是特殊元素例如window和document等只可以读，无法通过直接设置

 

一、jquery相关宽高介绍

---

• 1.1 width()
  • 特殊元素window.document只可以读，普通元素可以读写，width()返回结果无单位，css("width")的结果有单位

width--height

width

• 1.2 innerWidth()
  • 包含padding（不推荐window,document调用）
• 1.3 innerHeight()

innerWidth--innerHeight

innerWidth

• 1.4 outerWidth()
  • 包含padding和border，当传true时包含marging，不传时不包含marging（不推荐window,document调用）
• 1.5 outerHeight()

outerWidth--outerHeight

 

• 1.6 scrollLeft():
  • 相对于水平滚动条左边的距离，如果滚动条非常左、或者元素不能被滚动，这个值为0；

• 1.7 scrollTop():

  • 相对于垂直滚动条上边的距离，如果滚动条非常上、或者元素不能被滚动，这个值为0；

• 1.8 .offset():

  • 相对于document的当前坐标值(相对于body左上角的left,top的值)；
• 1.9 .position():
  • 相对于offset parent的当前坐标值(相对于offset parent元素的左上角的left、top的值)

offset和position区别

 

应用：

$(window).scroll(function(){
    var ks_area = $(window).height();
    var scrollTop = $(window).scrollTop();
    var wholeHeight = $(document).height();
    if(ks_area + scrollTop >=wholeHeight ){
        alert("已经到底部了");
    }else if(scrollTop == 0){
        alert("已经到头部了");
    }
})

在线演示

.