top property

Sets or retrieves the top coordinate of the rectangle surrounding the object content.

Syntax

JavaScript

p = object.top

 

Property values

Type: Integer

the top coordinate of the rectangle, in pixels.

Remarks

Use this syntax to access the top coordinate of the second text rectangle of a TextRange object:

Copy 

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

Note that the collection index starts at 0, so the second item index is 1.

To access the top coordinate of the bounding rectangle of an object, use this syntax:

Copy 

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

Examples

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

JavaScript
Copy 

<!DOCTYPE html>

<html>
<head>
  <title>boundingTop</title>
</head>
<body>
  <p onclick="getCoords(this)" style="cursor: pointer">Click this text with the F12 Tools console window open.</p>
  <script>
    function getCoords(oObject) {
      var oBndRct = oObject.getBoundingClientRect();
      console.log("Bounding rectangle = \n  Upper left coordinates: (" 
        + oBndRct.left + ", " + oBndRct.top + ")"
        + "\n  Lower right coordinates: ("
        + oBndRct.right + ", " + oBndRct.bottom + ")");
    }
  </script>
</body>
</html>

See also

Reference
bottom
left
right
TextRectangle

 

 

Show: