JQuery obtains summary of various width heights and page width heights of elements

Time:2019-12-22

window.onload=function(){
Var a = $(“ාdiv”). Width(), / / width() returns the width and height of the element, excluding padding / border / margin
B = $(“ාdiv”). Innerwidth(), / / innerwidth() returns the width and height of the element + padding
C = $(“#div”). Outerwidth(), / / outerwidth() returns the width and height of the element + padding + border
D = $(“ාdiv”). Outerwidth (true); / / outerwidth (true) returns element width + padding + border + margin
  console.log(a,b,c,d);
}

Height of the document body in the browser’s current window:
  $(document.body).height();
Width of the document body in the browser’s current window:
  $(document.body).width();
Get the vertical height of the scroll bar to the top (that is, the height of the web page being rolled up)
  $(document).scrollTop();
Gets the vertical width of the scroll bar to the left:
  $(document).scrollLeft();
Gets or sets the width of an element:
  $(obj).width();
Gets or sets the height of the element:
  $(obj).height();
The distance from the top boundary of an element to the top of the body: obj. Offset(). Top; (when the containing element of an element does not contain a scroll bar)
The distance from the left boundary of an element to the left of the body: obj. Offset(). Left; (when the element contains no scrollbar)
Returns the offset from the upper boundary of the current element to the upper boundary of its containing element: obj. Offset(). Top (if the containing element of the element contains a scroll bar)
Returns the offset from the left boundary of the current element to the left boundary of its containing element: obj. Offset(). Left (when the containing element of the element contains a scroll bar)

Problems encountered during development:

Content height is not enough, move the bottom up

Solution:

Determine the height difference of the content, and apply it to the margin top at the bottom:

  var gap = document.documentElement.clientHeight – $(“footer”).height() – $(“header”).height();

  if( gap > $(“.container”).height()){

    $(“footer”).css({
      ”margin-top”:gap – $(“.container”).height()+”px”
    })
  }