Windows apps
Collapse the table of content
Expand the table of content
Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

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:
© 2017 Microsoft