Comparison of methods and differences between Js and Jq for obtaining page element values_jquery

Both JS and Jquery can obtain the width, height and relative displacement of page elements. Can they be converted or replaced by each other? What are the differences in writing methods? This article will introduce it to you in detail.

1.Js gets browser height and width

document.documentElement.clientWidth ==> Browser visible area width
document.documentElement.clientHeight ==> Browser visible area height
document.body.clientWidth ==> BODY object width
document.body.clientHeight ==> BODY object height

Jq gets browser height and width

$(window).width() ==> Browser visible area width
$(window).height() ==> Browser visible area height
$(document).height() ==> Height of page document
$(document.body).height() ==> BODY object height

2.Js gets the height and width of the object

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

Jq gets the height and width of the object

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

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

obj.offsetLeft ==> The element's left relative to the parent element
obj.offsettop ==> The top
of the element relative to the parent element obj.scrollWidth ==> Get the scroll width of the object
obj.scrollHeight ==> Get the scroll height of the object
obj.scrollLeft ==> Set or get the scroll distance at the left end of the object
obj.scrollTop ==> Set or get the scroll distance at the top of the object

Jq gets the relative height and width of the object

obj.offset().left ==> The element is relative to the left of the document
obj.offset().top ==> The element is relative to the top
of the document obj.scrollLeft() ==> Sets or returns the offset of the object relative to the left side of the scroll bar.
obj.scrollTop() ==> Sets or returns the offset of the object relative to the top of the scroll bar.

The above is the entire content of this article, I hope you all like it.