Common dimensions and locations in Web front-end development

In our daily web front-end development process, we often use a variety of sizes and locations. It's usually when JS does the animation. Carousel Diagram, scrolling animation, particle, collision detection, drag, scroll loading, etc. Here I summarize the commonly used sizes and locations, not including the canvas,svg.

In Web page development, size and location are divided into the size and location of the screen, the size and location of the element, and the size and location of the document, but the size and location of the document is obtained through document.body, and is considered an element. There is also the position of the mouse. So the size and position are divided into three main categories:

1. Screen size and location
2. Element size and position
3. Special elements, size and location of documents
4. The position of the mouse (only available when the event is triggered)

The following are methods of obtaining the relevant dimensions and locations. Units are pixel values.

1. The size and position of the screen, obtained through the screens object;

Screen = = = Window.screen; // true; Screen.width; // the pixel width of the screen is screen.height; // The pixel height of the screen is screen.availheight; // the available height of the screen, under Windows system, is usually the removal of the taskbar's height value screen.availwidth; // the available width of the screen, under Windows system, is usually the removal of the taskbar width value screen.availleft; // The leftmost offset of the screen is screen.availtop relative to the leftmost side of the main screen ; // The offset value of the top edge of the screen relative to the top edge of the home screen

Here we need to say the available height, width, and offset values.

The available height and width values, in Chrome browser (version: 54.0.2840.99) is not real-time access, do not know whether future versions will change. That is, when the Chrome browser is turned on, the width of the screen available or the available height is determined. Adjusting the position, height, width, and so on of the taskbar does not affect these two values (screen.availwidth,screen.availheight), unless you change the screen resolution or restart your browser. In Firefox, all the information about the screen is available in real time.

With respect to the offset values (Availleft and Availtop), both values are 0 on a single screen, and only if there is an expansion screen, the screen object in the browser in the extension has a value other than 0, which is the offset of the expansion screen relative to the home screen.

2. Dimensions and position of elements

The position of the element

All elements in a page have basic properties, some of which are related to the position and size of the element. Element position-related properties, which are relative positions, that is, the offset of the element relative to its offset container (offsetParent)

1 varEle = document.getElementById ("element");//get an element2Ele.offsetparent;//Get offset Container3Ele.offsetleft;//offset of the element relative to the left of the offset container4Ele.offsettop;//offset of the element relative to the top edge of the offset container5   6Ele.clientleft;//The width of the left border of the element box is usually the case7Ele.clienttop;//The width of the top border of the element box is usually the case8   9Ele.scrollleft;//Position of the horizontal scrollbar relative to the scroll area width (scrollwidth) "scroll bar position"TenEle.scrolltop;//position of the scroll bar relative to the scroll area height (scrollheight) of the vertical scrollbar One  AEle.scrollleft = 30;//set the content area to scroll to the 30 position -Ele.scrolltop = 50;//set the content area to scroll to the 50 position

For Offsetleft and offsettop, these two values are relative to the offset container. There are two types of situations:

1. The element is positioned by position;

2. The element is positioned by float or margin;

In the first case, the values of offsetleft and offsettop are left and top values.

In the second case, the values of offsetleft and offsettop are the values of Margin-left and margin-top.

ClientLeft: Represents the width of the left border of an element, expressed in pixels. If the text content direction of an element is right-to-left, and the element content overflows, for example, <div dir= "RTL" >hello</div>, which results in a scroll bar on the left. The clientleft contains the width of the scrollbar, which is the sum of the width of the scroll bar and border.

ClientTop: Represents the width of the top border of an element.

ScrollLeft: Represents the distance to the left of the element for the scrollbar to be used to set the content area to scroll to a location, or to get the position of the current scroll bar

ScrollTop: Represents the distance to the top of the scrollbar, which you can use to set the content area to scroll to a location, or to get the position of the current scroll bar.

Dimensions of the element

1 ele.offsetwidth; // dimensions of the element box, including Content,padding,border, excluding margin and scroll bar dimensions 2 Ele.offsetheight; 3 4 Ele.clientwidth; // the dimensions of the element content area, including the size of the padding,content, excluding the dimensions of the border,margin and scroll bars 5 Ele.clientheight; 6 7 Ele.scrollwidth; // The sum of the true dimensions of the element and content area of the element itself area (itself padding+ content area Padding,margin,border,scrollbar) 8 Ele.scrollheight;

3. The size and location of the page----special elements: Document.body

Usually, we just need to get to the size of the page, the location of the page in the actual development is basically not used. The size of the page we get is also the same as when the element gets its size, which is obtained through the above property values.

We get the dimensions of the page by the BODY element in the page.

1 // gets the BODY element to the page 2 var body = document.body; // Method 1 3 var body = document.getElementsByTagName ("body") [0]; // Method 2 4 // There are other ways to get to the BODY element, document.getElementById, etc.,

Get the dimensions of a page

1 //Dimensions of the page2 Document.body.clientWidth;3 Document.body.clientHeight;4 5 Document.body.offsetWidth;6 Document.body.offsetHeight;7 8 Document.body.scrollWidth;9 Document.body.scrollHeight;Ten  One //location of the page A Document.body.clientLeft; - Document.body.clientTop; -  the Document.body.offsetLeft; - Document.bodyl.offsetTop; -  - Document.body.scrollLeft; +Document.body.scrollTop;

4. Get the mouse position in mouse events

The location of the mouse is only available in mouse events. "Onclick,onmousemove,onmousedown,onmouseenter,onmouseleave,onmouseover,onmouseout", when the incident occurred, The event object has some property values that are related to the mouse position.

Clientx,clienty; is the location of the mouse relative to the browser client area, not including the browser's address bar, the bookmarks bar, the bottom status bar and other browser features, just the document display area. is always positive

Pagex,pagey; is the position of the mouse relative to the document, that is, the position relative to documents. Pagex,pagey and Clientx,clienty have nothing to do with the width of the body. If the page does not scroll, the values are equal. is always positive.

Screenx,screeny; is the position of the mouse relative to the home screen. There is a negative value, which depends on the settings of the extended screen.

1Document.body.addEventListener ("click",function(event) {2Console.log ("Location x relative to the browser client area:", event.clientx);3Console.log ("location in relation to the browser client area y:", event.clienty);4 5Console.log ("relative to page position x:", event.clientx);6Console.log ("relative to page position y:", event.clienty);7 8Console.log ("position in relation to home screen x:", event.clientx);9Console.log ("Position y relative to home screen:", event.clienty);Ten});

5. About the width and height set in CSS;

The settings for the dimensions of the element in CSS, width and height, are just the dimensions of the content area of the set element. If the element has Margin,padding,border, the element's actual page size will be larger than the width and height settings.

For more information on element size, I'll do a detailed introduction to the box model article.

Size and position in 6.jQuery

Dimensions in jquery: Width () and height ()

Gets the width and height of the jquery object, which can be obtained by width () and by height (), which both get the width and height that the element is set through the CSS, excluding the element's padding, borders, and margins.

Width () and height () can not only get the dimensions of the element, but also the size of the element

$ ("#ele"). width (); // gets the width of the element $ ("#ele"). Height (); // gets the height of the element $ ("#ele"). Width (300); // sets the width of the element $ ("#ele"). Height (200); // set the height of an element

Innerwidth () and Innerheight ()

These two methods can get the dimensions of the element, including the inner margin

Outerwidth () and Outerheight ()

These two methods can get to the dimensions of the element, including the padding and borders

$ ("#ele"). Innerwidth (); $ ("#ele"). Innerheight (); $ ("#ele"). Outerwidth (); $ ("#ele"). Outerheight ();

The location of elements in jquery:

Offset ()

Position ()

The jquery object has two methods for the position of the element, offset () and position (), both of which return two attribute values, top and left. Both of these methods are valid only for visible elements.

The offset () method is to return the offset position of the element relative to the document.

The position () method returns the offset position of the element relative to the parent element.

$ ("#ele"). Offset (). left;$ ("#ele"). Offset (). top;$ ("#ele"). Position (). left;$ ("#ele"). Position (). Top;

The position of the scroll bar in jquery

ScrollTop () and ScrollLeft (), both of which can get the position of the current scroll bar or the position of the scrollbar.

//position of the element scroll bar with overflow area$ ("#ele"). ScrollTop ();//returns the position of the current scroll bar$ ("#ele"). ScrollLeft ();//returns the position of the current scroll bar$("#ele"). scrolltop (200);//set the position of the scroll bar$ ("#ele"). ScrollLeft (200);//set the position of the scroll bar//the position of the page scroll bar$ ("Body"). ScrollTop ();//returns the position of the current page scroll bar$ ("Body"). ScrollLeft ();//returns the position of the current page scroll bar$("Body"). ScrollTop (300);//Scrolls the current page to a position of 300$ ("Body"). ScrollLeft (300);//Scroll the horizontal scroll bar to the 300 position

The above summary is just an introduction to some of the dimensions and locations that we have in common with Dom in our daily web development. But in front-end development, it's also possible to do some development for canvas and SVG, where size and location in canvas and SVG are different from size locations in the DOM.

Everyone has a good weekend.

Common dimensions and locations in Web front-end development