Shulou(Shulou.com)06/01 Report--

With regard to element size, generally speaking, there are offset size offset, client area size client, and scroll size scroll. The offset attribute has been introduced earlier, and the scroll scroll size will be introduced later. This article mainly introduces the client area size client.

Client area size

Client area size client refers to the amount of space occupied by the content of an element and its inner margins.

ClientHeight

The clientHeight attribute returns the height of the client area of the element node

ClientHeight = padding-top + height + padding-bottom

ClientWidth

The clientWidth attribute returns the client area width of the element node

ClientWidth = padding-left + height + padding-right

/ / 120 (10: 100 / 10) console.log (test.clientHeight); console.log (test.clientWidth)

[note] Scroll bar width is not counted

/ / 103 (120-17), scroll bar width is 17pxconsole.log (test.clientHeight); console.log (test.clientWidth)

Content

Content

Content

Content

Content

Content

/ / 83 (100-17) console.log (test.clientHeight)

When the sum of height and vertical padding is 0 (and less than 17px), if there is still a scroll bar, each browser behaves differently

/ / chrome/safari:-17 (0-17) / / firefox/IE:0console.log (test.clientHeight)

/ / chrome/safari:-7 (10-17) / / firefox/IE:0console.log (test.clientHeight)

Bug

If you set overflow:scroll so that the scroll bar always exists, each browser behaves differently when the height height value is not set. There is a vertical scroll bar with a minimum height of 34px in firefox, a vertical scroll bar with a minimum height of 19px in IE7- browsers, and no minimum height in other browsers.

So, when the value of clientHeight is less than 34px, firefox returns 34; when the value of clientHeight is less than 19px, IE7- returns 19

/ / chrome/IE8+/safari:0 (because both height and padding are 0) / / firefox:34 (after setting overflow:scroll, there is a vertical scroll bar with high 34px by default) / / IE7-:19 (there is a vertical scroll bar with high 19px by default) console.log (test.clientHeight)

Content / / chrome/IE8+/safari:20 (20.1) / / firefox:34 (2019) console.log (test.clientHeight)

Content / / chrome/IE8+/safari:40 (20 / 11 / 20) / / firefox:40 (40 > 34) / / IE7-:40 (40 > 19) console.log (test.clientHeight)

ClientLeft

The clientLeft property returns the width of the left border

ClientTop

The clientTop property returns the width of the upper border

/ / 1 1console.log (test.clientLeft); console.log (test.clientTop)

[note] if display is inline, both the clientLeft property and the clientTop property return 0

/ / 0 0console.log (test.clientLeft); console.log (test.clientTop)

Page size

The client property of document.documentElement is commonly used to represent the page size (excluding scroll bar width)

[note] in IE7- browsers, elements have vertical scroll bars by default

/ 1903 (1920-17) console.log (document.documentElement.clientWidth); / 930 (947-17) console.log (document.documentElement.clientHeight)

Another property commonly used to represent page size is the window.innerHeight and innerWidth properties (including scroll bar width)

InnerHeight and innerWidth represent the browser window size minus the remaining page sizes such as the menu bar, address bar, and so on. Because the scroll bar belongs to the page, it contains the scroll bar

[note] IE8- browsers do not support innerHeight and innerWidth attributes

/ / 1920console.log (window.innerWidth); / / 947console.log (window.innerHeight)

If there is no scroll bar, these two types of properties represent the same value on the computer side, but have different meanings. On the mobile side, innerWidth and innerHeight represent visual viewports, the area of the website that the user is seeing, while document.documentElement.clientWidth and clientHeight represent layout viewports, which refer to the size of the CSS layout. The details move to this point.

[note] the client area size of the page is different from the actual size of the page, and the actual size of the page will be represented by the scroll scroll size later on.

Matters needing attention

[1] all client area client properties are read-only

Console.log (test.clientHeight); / / IE8- browsers will report an error, while other browsers will silently fail test.clientHeight = 10% console.log (test.clientHeight)

[2] if display:none is set for the element, the client area client attribute is 0

Console.log (test.clientHeight); / / 0console.log (test.clientTop); / / 0

[3] the client attributes of the client area need to be recalculated every time, and repeated access requires a lot of performance, so try to avoid repeated access to these attributes. If repeated access is required, save their values in variables to improve performance

Console.time ("time"); for (var I = 0; I < 1000000; iTunes +) {var a = test.clientHeight;} console.timeEnd ('time'); / / 66.798ms

Console.time ("time"); var a = test.clientHeight;for (var I = 0; I < 1000000; iTunes +) {var b = a;} console.timeEnd ('time'); / / 1.705ms

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.