JS and JQ methods and differences in obtaining page element values

Get browser height and width

Document.documentElement.clientWidth ==> Browser Visible area width
Document.documentElement.clientHeight ==> Browser Visible area height

$ (document). Width () ==> browser visible area widths
$ (document). Height () ==> Browser visible Area Heights

Get the height and width of an object

Obj.width = obj.style.width ==> receives element content width
Obj.clientwidth = width + padding ==> Gets the element widths including the inner bounds (padding)
Obj.offsetwidth = width + padding + border ==> Gets the element height including the inner boundary (padding) and border (border)

Obj.width () ==> element content width
Obj.innerwidth () ==> obtains the element width 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)

Gets the relative height and width of the object

Obj.offsetleft ==> element relative to the left of the parent element
Obj.offsettop the top of the ==> element relative to the parent element
Obj.scrollwidth ==> Gets the scrolling width of the object
Obj.scrollheight ==> Gets the scroll height of the object
Obj.scrollleft ==> Sets or gets the distance that is scrolled at the left end of the object
Obj.scrolltop ==> Sets or gets the distance that is scrolled at the top of the object

Obj.offset (). Left ==> element relative to left of document
Obj.offset (). Top ==> element relative to top of 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.

JS and JQ methods and differences in obtaining page element values