Both JS and Jquery can get the width, height and relative displacement of page elements. Can they be converted or replaced? What are the differences? This article will introduce you in detail.

Js gets the browser height and width

document.documentElement.clientWidth == > The width of the browser’s visible area document.documentElement.clientHeight == > Browser visibility height document.body.clientWidth == > BODY object width document.body.clientHeight == > BODY object height

Jq gets the browser height and width

$(window).width() == > The width of the browser’s visible area $(window).height() == > Browser visibility height $(document).height() == > The height of the page document $(document.body).height() == > BODY object height

Js gets the height and width of the object

obj.width = obj.style.width obj.clientWidth = width + padding == > Gets the width of the element including the inner boundary (padding) obj.offsetHeight = height + padding + border == > Gets the height of the element including the inner boundary (padding) and the border (border)

Jq gets the height and width of the object

obj.innerWidth() == > Get the width of the element including the inner boundary (padding), obj.outerWidth() == > Gets the width of the element including the inner boundary (padding) and the border (border) obj.outerWidth(true) == > Gets the width of the element including the outer boundary (margin) The same element as w should be: width() < =innerWidth() < =outerWidth() < =outerWidth(true);

3.Js gets the relative height and width of the object

obj.offsetLeft == > The element is left relative to the parent element obj.offsettop == > Element relative to the parent element’s top obj.scrollWidth == > Gets the scroll width of the object obj.scrollHeight == > Gets the scrolling height of the object obj.scrollLeft == > Sets or gets the scrolling distance at the left end of the object obj.scrollTop == > Sets or gets the distance to scroll at the top of the object

Jq gets the relative height and width of the object

obj.offset().left == > Element relative to left of the document obj.offset().top == > Element relative to the document’s top obj.scrollLeft() == > Sets or returns an offset to the left of the object relative to the scroll bar. obj.scrollTop() == > Sets or returns the offset of the object relative to the top of the scroll bar.

This is the end of this article, I hope you enjoy it.