In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > selection and ranges > properties > startOffset (Range)

startOffset property (Range)

Browser support:

9

Returns an integer that specifies the start position of the current Range relative to the startContainer element.

Note: The Range object and its startOffset property are supported in Internet Explorer from version 9.

If the node referred to by the startContainer property is a TextNode, CDATASection or CommentNode, then the startOffset property returns a character position in the text content of the referred node. For other node types, the returned value is an index into the childNodes collection of the node.

Similarly, you can get the end point of a Range with the endContainer and endOffset properties.

If you want to modify the start or end point, use the setStart / setStartBefore / setStartAfter and the setEnd / setEndBefore / setEndAfter methods.
If you want to align the boundary points of a Range to the start and end points of an element or its contents, use the selectNode or selectNodeContents method.

Syntax:

object.startOffset;

You can find the related objects in the Supported by objects section below.

This property is read-only.

Possible values:

Integer that represents the start position.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the startOffset property:

<head>
    <script type="text/javascript">
        function TestBoundary () {
            var mySpan = document.getElementById ("mySpan");
            if (document.createRange) {     // all browsers, except IE before version 9
                var myRange = document.createRange ();

                myRange.selectNodeContents (mySpan);
                alert ("The range starts at the " + myRange.startOffset + ". child of the " + myRange.startContainer.tagName + " element.");
                alert ("The range ends at the " + myRange.endOffset + ". child of the " + myRange.endContainer.tagName + " element.");

                var textNode = mySpan.firstChild;
                myRange.selectNodeContents (textNode);
                alert ("The range starts at the " + myRange.startOffset + ". character position of the textNode element.");
                alert ("The range ends at the " + myRange.endOffset + ". character position of the textNode element.");
            }
            else {
                alert ("Your browser does not support this example!");
            }
        }
    </script>
</head>
<body>
    <button onclick="TestBoundary ()">Test the boundary positions of a range!</button>
    <br /><br />
    <span id="mySpan">The length of this text is 30.</span>
</body>