The values of these attributes of window and document are not compatible, which will be added later.
The effect display ignores browsers before IE9 and mainly considers the effects of mainstream browsers and mobile phones.
You can get the attributes of width and height
##clientHeight and clientWidth refer to the client of the element Area size, that is, visible content area+padding
#t1{ width: 100px; height: 100px; border: 4px solid yellowgreen; background: yellow; padding: 10px; }
No borders, the width and height when the content overflows or scroll bars appear will not be counted.
is the visible width of the dom object. The visible width here refers to hiding part of the content after setting
overflow: scroll;.
offsetHeight and offsetWidth are the external size of the element, that is, border + padding + visible content area
2+border(4)2Content area of the above picture Overflow hiding occurs because
overflow: scroll; is set.
scrolWidth and scrollHeight are the actual sizes of the elements, that is, the actual content area + padding
window.getComputedStyle(p,null).getPropertyValue('width');The obtained value is 100.
Now let’s take a look at the magic in this. . .
document.body and document.documentElementThe former is body and the latter is html. But now everyone is accustomed to setting the default padding and margin of elements to 0, so that no matter who accesses the clientWidth through the above two methods, the value will be the same (the same on the computer side).
But when the mobile phone accesses these two values, since it is a client, we will make some settings for the
meta tag of the web page, and then the values of the attributes accessed through these two objects will be no the same. However, since body is a sub-tag of html, to obtain the size of the visual window (clientWidth), it is recommended to use the latter document.documentElement.clientWidth.
The document object has an attribute compatMode, which has two values:BackCompat corresponds to quirks mode
CSS1Compat corresponds to strict mode
Browsers before IE6 are the first rendering mode , causing IE6 to use document.body.clientWidth to access the visual window (clientWidth). IE6 The company I interned with has given up.
Which one should I use between window.innerWidth and document.documentElement.clientWidth? The next thing I will talk about is the effect of not adding meta tags to web pages. I think I should write another article about adding tags, because it will involve the knowledge of
Adaptive. I did a test on the Android browser, the iPhone's safari browser, and the qq browser running on WeChat on both phones.
The test results are definitely not uniform.
Test premise: Do not set a fixed width for the page and do not set a meta tag.
Test result:
Android | iphone | |
---|---|---|
980px | 980px | |
980px | 980px |
iphone WeChat | ||
---|---|---|
320px | 980px | ~.~.clientWidth |
980px |
The above is the detailed content of Example of method to get width in JS. For more information, please follow other related articles on the PHP Chinese website!