Method and difference comparison of Js and Jq for obtaining page element values

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.