淺談jQuery寬高及其應用

標籤：win   padding   距離   協助   dep   targe   view   imageview   特殊   

【前言】

      今天講了講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("已經到頭部了");    }})

線上示範

.

淺談jQuery寬高及其應用