Export (0) Print
Expand All

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


<!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>

See also

TextRange
Reference
boundingHeight
boundingTop
boundingWidth

 

 

Show:
© 2014 Microsoft