Js and Jq methods to obtain browser and object values ​​_javascript skills

JS and Jquery can both 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)

wThe same element 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 method introduced by the editor to get browser and object values ​​​​in Js and Jq. I hope it will be helpful to everyone!