Example of method to get width in JS

---

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;
     }

  
  

  p.clientWidth+';'+p.clientHeight;
  120= width(100)+padding(10)*2;

  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

  
  

  p.offsetWidth+';'+p.offsetHeight
  128 = width(100)+padding(10)

  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

  
  

  p.scrollWidth+';'+p.scrollHeight

The above three pairs of attributes are all for the dom element. The width of the element can be measured, but if you are careful, you will It is found that the above three do not provide a method to obtain width (100), so you can use

window.getComputedStyle(p,null).getPropertyValue('width');The obtained value is 100.

---

In fact, what is more difficult to understand is that the two DOM objects like window, document.body, and document.documentElement have various problems when obtaining their widths.

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.
  

To sum up: abandon the usage of document.body and use document.documentElement.

• 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:
  

PropertiesAndroidiphonewindow.innerWidth980px980px##~.~.clientWidth

980px	980px

##AttributeAndroid WeChatiphone WeChatwindow.innerWidth~.~.clientWidth980px980px

There are always troublemakers. . .
To sum up: If you want to get the visual width of the mobile page, it is recommended to use
document. documentElement.clientWidth

In the next article, notes, we will discuss this The value of the attribute under different settings of the meta tag is analyzed.

BTW: I’m back again, studying hard!

【Related recommendations】

1. Free js online video tutorial

2. JavaScript Chinese Reference Manual

3. php.cn Dugu Jiujian (3) - JavaScript video tutorial

320px	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!