boundingLeft property

Retrieves the distance between the left edge of the rectangle that bounds the TextRange object and the left side of the object that contains the TextRange.

Syntax

JavaScript	`p = object.boundingLeft`

Property values

Type: Integer

the left coordinate of the bounding rectangle, in pixels.

Examples

This example retrieves the value of the boundingLeft property for the given text area.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/boundingTop.htm

JavaScript


<!DOCTYPE html>
<html>
<head>
  <title>boundingTop | boundingLeft | boundingHeight | boundingWidth</title>
  <style>
    textarea {
      margin: 10px;
    }

    #oContainer {
      position: absolute;
      top: 0;
      left: 0;
      height: 1px;
      width: 1px;
    }

    .frame {
      position: absolute;
      margin: 0;
      padding: 0;
      border: 1px solid black;
      background-color: transparent;
      z-index: -2;
    }
  </style>
</head>

<body>
  <h1>boundingTop | boundingLeft | boundingHeight | boundingWidth</h1>
  <p>
    This sample displays the bounding rectangle of text within <strong>textarea</strong> elements. 
    Since the TextRange is inside a <strong>textarea</strong>, the value of the element's 
    <strong>scrollTop</strong> property is added to the value of <strong>boundingTop</strong>.
  </p>
  <textarea style="width: 90%" rows="4" id="oID_1" onclick="boundDim(this)">Click on this textarea to get its bounding rectangle properties.</textarea>
  <textarea style="width: 50%" rows="6" id="oID_2" onclick="boundDim(this)">Click on this textarea to get its bounding rectangle properties.</textarea>
  <textarea style="width: 20%" rows="10" id="id3" onclick="boundDim(this)">Click on this textarea to get its bounding rectangle properties.</textarea>
  <div id="oContainer"></div>
  <script>
    var oContainer = document.getElementById('oContainer');

    function boundDim(element) {
      var r = element.createTextRange();
      if (r != null) {
        var s = "The boundingTop is: " + r.boundingTop;
        s += "\nThe boundingLeft is: " + r.boundingLeft;
        s += "\nThe boundingHeight is: " + r.boundingHeight;
        s += "\nThe boundingWidth is: " + r.boundingWidth;
        element.textContent = s;
        clearRegions();
        alert("scrollTop: " + element.scrollTop);
        var newTop = r.boundingTop + element.scrollTop;
        var rct = {
          top: newTop,
          left: r.boundingLeft,
          bottom: newTop + r.boundingHeight,
          right: r.boundingLeft + r.boundingWidth
        };
        showRegion(rct, "red");
      }
    }

    function showRegion(rct, color) {
      var d = document.createElement('div');
      d.className = "frame";
      d.style.borderColor = color;
      d.style.top = rct.top - 2 + getBody().scrollTop + "px";
      d.style.left = rct.left - 2 + "px";
      d.style.width = Math.max(rct.right - rct.left - 2, 0) + "px";
      d.style.height = Math.max(rct.bottom - rct.top - 2, 0) + "px";
      oContainer.appendChild(d);
    }

    function clearRegions() {
      oContainer.innerHTML = "";
    }
    window.onresize = clearRegions;

    function getBody() {
      return (document.compatMode == 'BackCompat' ? document.body : document.documentElement);
    }
  </script>
</body>
</html>

boundingLeft property

Syntax

Property values

Examples

See also