Home>

The difference between scrollheight, clientheight, offsetheight

Explanation:

scrollheight:the height of the actual content of the dom element,The height without the border will increase as the content of the dom element increases (after exceeding the viewable area).

clientheight:the height of the visible area of ​​the content of the dom element,Does not include the height of scroll bars and borders.

offsetheight:the overall height of the dom element,Including scroll bars and borders.

When the scroll bar does not appear

At this time, there is no content in the dom element or the content does not exceed the visible area.

scrollwidth=clientwidth, both of which are the width of the viewable area.

scrollheight=clientheight, both are the height of the viewable area.

offsetwidth and offsetseight are the overall width and height of the dom element.

When the scroll bar appears

At this time, there is no content in the dom element or the content does not exceed the visible area.

scrollwidth>clientwidth

scrollheight>clientheight

scrollwidth and scrollheight are the width and height of the actual content, respectively

clientwidth and clientheight are the width and height of the content viewable area, respectively

offsetwidth and offsetseight are the overall width and height of the dom element.

demo:

<! Doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Correct understanding and use of dom attributes related to size</title>
    <style type="text/css">
    html, body {margin:0;}
    body {padding:100px;}
  #box {
    overflow:scroll;
    width:400px;
    height:300px;
    padding:20px;
    border:10px solid #000;
    margin:0 auto;
    box-sizing:content-box;
    / *
    box-sizing:content-box indicates that the width and height of the element does not include the width and height of the padding and border
    box-sizing:border-box indicates the width and height of the element, including the width and height of the padding and border
     * /
  }
  #box2 {
    border:1px solid #000;
  }
    </style>
  </head>
  <body>
  <div>
    <div>Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Google Chrome browser test results Google Chrome browser test results Google Chrome browser test results Google Chrome browser test results Google Chrome browser test results Google Chrome browser test results Google Chrome browser test results Google Chrome browser test results Google Chrome browser test results Google Chrome browser test results Google Chrome browser test results Google Chrome browser test results Google Chrome browser test results Google Chrome browser test results Google Chrome browser test results Google Chrome browser test results Google Chrome browser test results Google Chrome browser test results Google Chrome browser test results Google Chrome browser test results Google Chrome browser test results Google Chrome browser test results Google Chrome Test Results Google Chrome Test Results Google Chrome Test Results Google Chrome Test Results Google Chrome Test Results Google Chrome Test Results Google Chrome Test Results Google Chrome Test Results Google Chrome Test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome Test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Google Chrome test results Test results Google Chrome test results Google Chrome test results Google Chrome test results</div>
  </div>
  <script type="text/javascript">
  // offsetwidth, offsettheight corresponds to the width and height of the box model
  // scrollwidth, corresponding to the scrollheight is the width and height of the scroll area,But does not include the width of the scroll bar! The scroll area consists of padding and content.
  // clientwidth, clientheight corresponds to the width and height of the part of the box model after removing the border,Width without scroll bar
    var boxe=document.getelementbyid ("box");
    var box=document.getelementbyid ("box2");
    // There is no horizontal overflow for scrollwidth,At the same time, due to overflow:scroll, scrollwidth is the same as clientwidth, but does not include the width of the scroll bar
    console.log ("scrollwidth:" + boxe.scrollwidth);// 423
    console.log ("scrollheight:" + boxe.scrollheight);// 672
    // clientwidth and clientheight are equal to offsetwidth and offseteth minus the corresponding border (20px up and down, 20px left and right) and the value of the scroll bar width (the scroll bar width is 17px in chrome);
    console.log ("clientwidth:" + boxe.clientwidth);// 423=460-20-17
    console.log ("clientheight:" + boxe.clientheight);// 323=360-20-17
    // offsetwidth and offsettheight are exactly the same as the size seen by the chrome review element
    console.log ("offsetwidth:" + boxe.offsetwidth);// 460=width + padding + border
    console.log ("offsetheight:" + boxe.offsetheight);/360=height + padding + border
  </script>
  </body>
</html>

Get size of dom element using js

Get html root element:document.documentelement

Get the body element:document.body

Get the width and height of the visible area of ​​the page,Excluding scroll bar

Used in ie, ff, chrome:

Use document.documentelement.clientwidth and document.documentelement.clientheight

Note:In ie6 standard mode,The above way can

In promiscuous mode:

ie6 uses document.body.clientwidth and document.body.clientheight

Note:window.innerwidth/height includes the width and height of the scroll bar.This is also different from document.documentelement.clientwidth/height.

So pay attention to compatible writing when using:

demo

<! Doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>page viewport width&height</title>
</head>
<body>
  <script type="text/javascript">
  // standard mode
  var w=document.documentelement.clientwidth;
  var h=document.documentelement.clientheight;
  console.log ("w width:" + w + "---" + "h height:" + h);
  // Misc mode
  var width=document.body.clientwidth;
  var height=document.body.clientheight;
  // compatible writing
  var ww=document.documentelement.clientwidth || document.body.clientwidth;
  var hh=document.documentelement.clientheight || document.body.clientheight;
  console.log ("ww width:" + ww + "---" + "hh height:" + hh);
  </script>
</body>
</html>

Get the size of an ordinary html element

doce.offsetwidth;

doce.offsetheight;

Get scroll bar scroll height (compatibility processing)

var otop=document.documentelement.scrolltop || document.body.scrolltop;

offsetwidth and offsetseight

These two properties represent the width and height of the visible area of ​​the element,This value includes the element's border, horizontal padding, vertical scroll bar width or height,The width or height of the element itself.

The values ​​of the offsetwidth and offsetseight attributes are only relevant to this element,Independent of surrounding elements (parent and child elements).

offsetwidth=(border-width) * 2 + (padding-left) + (width) + (padding-right)

offsetheight=(border-width) * 2 + (padding-top) + (height) + (padding-bottom)

offsetleft and offsettop

The two values ​​of offsetleft and offsettop are related to offsetparent.

The offsetparent property returns a reference to the object,This object is the closest to the element that calls offsetparent (closest in the containment hierarchy) and is a container element that has been positioned by CSS. If this container element is not positioned by CSS, the value of the offsetparent attribute is a reference to the root element (ie, the body element).

Two rules:

If the parent element of the current element is not CSS-positioned (position is absolute or relative), offsetparent is body.

If the parent element of the current element has css positioning (position is absolute or relative), offsetparent takes the nearest parent element.

offsetleft:the horizontal offset of the top-left vertex of the object element boundary relative to the top-left vertex of offsetparent;

offsettop:the vertical offset of the top-left vertex of the boundary of the object element relative to the top-left vertex of offsetparent;

offsetleft=(padding-left of offsetparent) + (offsetwidth of the middle element) + (margin-left of the current element)

offsettop=(offsetparent's padding-top) + (offsetetheight of the intermediate element) + (margin-top of the current element)

The situation is special when offsetparent is body:

In ie8/9/10 and chrome:

offsetleft=(margin-left of the body) + (border-width of the body) + (padding-left of the body) + (margin-left of the current element).

In firefox:

offsetleft=(margin-left of the body) + (padding-left of the body) + (margin-left of the current element)

  • Previous php each returns the current key-value pair in an array and moves the array pointer forward by one instance
  • Next Android pop-up Dialog (horizontal full screen) example code
  • Trends