JavaScript location and size (1): a correct understanding and use of DOM properties related to size _ javascript skills

This article mainly introduces the JavaScript location and size (1) -- correctly understands and uses the DOM attributes related to the size. For more information, see web development, inevitably, the problem of calculating the element size and position is solved by using some APIs provided by DOM in combination with compatibility, all the content is described in about three articles. As the first article, this article introduces DOM attributes related to the size and size of DOM, provides some compatibility processing methods, and describes how to correctly use these attributes in combination with common scenarios.

1. understand offsetWidth, clientWidth, scrollWidth, and corresponding height attributes correctly

If the scroll bars of an element are dragged to the very end, the corresponding range of the properties such as offsetWidth, clientWidth, and scrollWidth is shown in:

1) offsetWidth and offsetHeight correspond to the width and height of the box model. These two values are consistent with the size we saw when using chrome to review elements:

2) scrollWidth: it corresponds to the width and height of the scroll area, but does not contain the width of the scroll bar! The rolling area consists of padding and content.

3) clientWidth: clientHeight corresponds to the width and height of the area in which the box model removes the border, excluding the width of the scroll bar.

4) any DOM element can quickly obtain offsetWidth, clientWidth, scrollWidh and related height attributes through the following api:

// DomE is a DOM Html Element object
DomE. scrollWidth
DomE. scrollHeight
DomE. clientWidth
DomE. clientHeight
DomE. offsetWidth
DomE. offsetHeight
// DomE is a DOM Html Element object
DomE. scrollWidth
DomE. scrollHeight
DomE. clientWidth
DomE. clientHeight
DomE. offsetWidth
DomE. offsetHeight

5) these attributes have almost no compatibility issues in modern browsers, including pc and mobile, so you can use them with confidence. For details about compatibility rules, refer to the following two articles:

W3C DOM Compatibility-CSS Object Model View

Cssom view mode cssom-view-module

The following is a one-to-one test of the relevant attributes of common html elements, html root elements, and body elements to verify the previous conclusions and summarize some experience and skills that can be directly used in the actual coding process. The reason for distinguishing between common html elements, html root elements, and body elements is that, in the previous theory, html root elements and body elements are somewhat weird and need to be handled with caution.

Note:

1. in order to reduce the length of the article, the tested code is not complete, but it does not affect the learning reference. In addition, the test results provided in this article are all run in chrome (version: 45.0, if the test results are different, the test results of IE9, IE10, IE11, firefox (version: 42.0), and opera (version: 34.0) are also displayed, if there is no difference, it will be explained in the test results. IE8 and below are not considered.

2. safari is not tested due to device restrictions. In addition, it is the same as the chrome kernel, and the reliability of standard support is not good.

3. earlier versions of chrome, firefox, and opera cannot be tested due to device restrictions. However, considering the browser's support for standards, these three browsers started to comply with W3C standards in early versions. In addition, these browsers are updated quickly, and now the mainstream versions of these browsers are relatively new on the market.

4. because IE8 and below are not considered and html is currently used in html5, document. compatMode = 'backcomput' is not considered. However, although the BackCompat mode is derived from IE6 browsers, there are also documents for chrome and firefox. compatMode = 'backcomput'. for example, you can use chrome to open the following webpage and print the document on the console. compatMode, you will find that its value is also BackCompat (the reason is that the page uses the dtd of html4.0. if it is changed to the dtd of html4.01, this will not happen in chrome and firefox):

Http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/compatModeCompat.htm