Exploring the Bounding TextRange Properties
<HTML>
<HEAD>
<TITLE>TextRange Object Dimension Properties</TITLE>
<STYLE TYPE="text/css">
TD {text-align:center}
.propName {font-family: Courier, monospace}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
function setAndShowRangeData() {
var range = document.selection.createRange()
B1.innerText = range.boundingHeight
B2.innerText = range.boundingWidth
B3.innerText = range.boundingTop
B4.innerText = range.boundingLeft
B5.innerText = range.offsetTop
B6.innerText = range.offsetLeft
}
</SCRIPT>
</HEAD>
<BODY onResize="setAndShowRangeData()">
<H1>TextRange Object Dimension Properties</H1>
<HR>
<P>Select text in the paragraph below.</P>
<TABLE ID="results" BORDER=1 >
<TR><TH>Property</TH><TH>Pixel Value</TH></TR>
<TR>
<TD CLASS="propName">boundingHeight</TD>
<TD CLASS="count" ID="B1"> </TD>
</TR>
<TR>
<TD CLASS="propName">boundingWidth</TD>
<TD CLASS="count" ID="B2"> </TD>
</TR>
<TR>
<TD CLASS="propName">boundingTop</TD>
<TD CLASS="count" ID="B3"> </TD>
</TR>
<TR>
<TD CLASS="propName">boundingLeft</TD>
<TD CLASS="count" ID="B4"> </TD>
</TR>
<TR>
<TD CLASS="propName">offsetTop</TD>
<TD CLASS="count" ID="B5"> </TD>
</TR>
<TR>
<TD CLASS="propName">offsetLeft</TD>
<TD CLASS="count" ID="B6"> </TD>
</TR>
</TABLE>
<HR>
<P onMouseUp="setAndShowRangeData()">
text text text text text text text text text text text text text
text text text text text text text <br>text
text text text text text text text text text text text
text text text text text text text text text text </P>
</BODY>
</HTML>
Related examples in the same category
