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

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

collapsed property (Range)

Browser support:

9

Returns a Boolean value that indicates whether the start and end points of the current Range are in the same position.

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

You can get the boundary points with the startContainer, startOffset, endContainer and endOffset properties. If you want to collapse a Range, use the collapse method.

Syntax:

object.collapsed;

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

This property is read-only.

Possible values:

Boolean that indicates the relation between the boundary points of the Range object.

One of the following values:

false

The start and end points are in different positions.

true

The start and end points are at the same position.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the collapsed property:

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

                myRange.selectNode (mySpan);
                if (myRange.collapsed)
                    alert ("Selecting an empty span element results in empty Range object.");
                else
                    alert ("Selecting an empty span element results in non-empty Range object.");

                myRange.selectNodeContents (mySpan);
                if (myRange.collapsed)
                    alert ("Selecting the contents of an empty span element results in empty Range object.");
                else
                    alert ("Selecting the contents of an empty span element results in non-empty Range object.");
            } else {
                alert ("Your browser does not support this example!");
            }
        }
    </script>
</head>
<body>
    <button onclick="TestCollapsed ()">Test the collapsed state!</button>
    <span id="mySpan"></span>
</body>