Exploring the Bounding TextRange Properties

Exploring the Bounding TextRange Properties : Text HTML : HTML JAVASCRIPT DHTML TUTORIALS

JAVASCRIPT DHTML TUTORIALS » HTML » Text HTML »

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">&nbsp;</TD>
</TR>
<TR>
    <TD CLASS="propName">boundingWidth</TD>
    <TD CLASS="count" ID="B2">&nbsp;</TD>
</TR>
<TR>
    <TD CLASS="propName">boundingTop</TD>
    <TD CLASS="count" ID="B3">&nbsp;</TD>
</TR>
<TR>
    <TD CLASS="propName">boundingLeft</TD>
    <TD CLASS="count" ID="B4">&nbsp;</TD>
</TR>
<TR>
    <TD CLASS="propName">offsetTop</TD>
    <TD CLASS="count" ID="B5">&nbsp;</TD>
</TR>
<TR>
    <TD CLASS="propName">offsetLeft</TD>
    <TD CLASS="count" ID="B6">&nbsp;</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>