This page is Almost Ready

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

bottom

Summary

Returns the bottom value for a ClienRect object.

Property of css/cssom/ClientRectcss/cssom/ClientRect

Syntax

Note: This property is read-only.

var pixelsFromBottom = clientRect.bottom;

Return Value

Returns an object of type NumberNumber

The number of pixels.

Examples

This example uses the getBoundingClientRect method to retrieve the coordinates of the bounds of the text rectangles within the element.

<!doctype html>
<html>
 <head>
  <title><title>
  <script>
function getCoords() {
  oBndRct=this.getBoundingClientRect();
  console.log("Bounding rectangle = \nUpper left coordinates: " +
    oBndRct.left + " " + oBndRct.top +
    "\nLower right coordinates: " +
    oBndRct.right + " " + oBndRct.bottom);
}
window.addEventListener("load", getCoords, false);
  </script>
 </head>
 <body>
  <p ></p>
 </body>
</html>

View live example

Notes

This syntax shows how to access the bottom coordinate of the second text rectangle of a TextRange oTextRange object.

oRct = oTextRange.getClientRects();
oRct[1].bottom;

Note that the collection index starts at 0, so the second item index is 1. This syntax shows how to access the bottom coordinate of the bounding rectangle of an oElement element object.

oBndRct = oElement.getBoundingClientRect();
oBndRct.bottom;

Attributions