JS and JQ methods for obtaining browser and object values

Source: Internet
Author: User

JS and Jquery can get the width of the page element, height and relative displacement, and so on, that they can convert or replace each other, the wording of the difference? This article will introduce you in detail.


1.Js get 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 get browser height and width
$ (window). Width () ==> browser visible area widths
$ (window). Height () ==> Browser visible Area Heights
$ (document). Height () ==> of the page document
$ (document.body). Height () ==> Body Object

2.Js Gets the height and width of the object
Obj.width = Obj.style.width
Obj.clientwidth = width + padding ==> Gets the element widths including the inner bounds (padding)
Obj.offsetheight = height + padding + border ==> get the element height including inner border (padding) and border (border)

JQ Gets the height and width of the object
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)
W the same element should be: Width () <=innerwidth () <=outerwidth () <=outerwidth (true);

3.Js 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


Jq Gets the relative height and width 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 for obtaining browser and object values

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.