Home > Web Front-end > JS Tutorial > Example of method to get width in JS

Example of method to get width in JS

零下一度
Release: 2017-05-06 15:26:11
Original
1919 people have browsed it

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;
         }
      Copy after login

      Example of method to get width in JS

      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

      Example of method to get width in JS

      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

      Example of method to get width in JS

      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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template