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

You are here: Reference > JavaScript > client-side > style handling > objects > Rect

Rect object

Browser support:

Represents a style value when it is a rect function.

If the value of a style property is a rect function, you can use the getRectValue method to retrieve a Rect object that represents the value.

Syntax:

Methods that return the object:

•	CSSPrimitiveValue.getRectValue ( )

The base interface, through which you can add new functionalities to the Rect object, is the Rect interface.

Possible members:

Properties:

bottom

Returns a CSSPrimitiveValue object that represents the bottom value of the current rectangle.

This property is read-only.

left

Returns a CSSPrimitiveValue object that represents the left value of the current rectangle.

This property is read-only.

right

Returns a CSSPrimitiveValue object that represents the right value of the current rectangle.

This property is read-only.

top

Returns a CSSPrimitiveValue object that represents the top value of the current rectangle.

This property is read-only.

Example HTML code 1:

This example illustrates the use of the Rect object:

<head>
    <style>
        #testDiv {
            position: absolute;
            top:20px;
            left:30px;
            background-color: yellow; 
            width:200px;
            height:400px;
            padding-top:30px;
            padding-left:10px;
            clip: rect(25px, 150px, 150px, 5px);
        }
    </style>
    <script type="text/javascript">
        function GetClipRect () {
            var div = document.getElementById ("testDiv");
            if (window.getComputedStyle) {
                var compStyle = window.getComputedStyle (div, null);
                try {
                    var value = compStyle.getPropertyCSSValue ("clip");
                    if (value) {
                        var valueType = value.primitiveType;
                        if (valueType == CSSPrimitiveValue.CSS_RECT) {
                            var rect = value.getRectValue ();
                            var topPX = rect.top.getFloatValue (CSSPrimitiveValue.CSS_PX);
                            var rightPX = rect.right.getFloatValue (CSSPrimitiveValue.CSS_PX);
                            var bottomPX = rect.bottom.getFloatValue (CSSPrimitiveValue.CSS_PX);
                            var leftPX = rect.left.getFloatValue (CSSPrimitiveValue.CSS_PX);
                            
                            message = "left: " + leftPX + "px\n";
                            message += "top: " + topPX + "px\n";
                            message += "right: " + rightPX + "px\n";
                            message += "bottom: " + bottomPX + "px";
                            alert (message);
                        }
                        else {
                            alert ("The value of the clip property is not a rect function!");
                        }
                    }
                    else {
                        alert ("Your browser does not support the getPropertyCSSValue method for the clip property!");
                    }
                } 
                catch (e) {
                    alert ("Your browser does not support the getPropertyCSSValue method!");
                }
            }
            else {
                alert ("Your browser does not support the getComputedStyle method!");
            }
        }
    </script>
</head>
<body>
    <div id="testDiv">An element with clip.</div>
    <br />
    <button onclick="GetClipRect ()">Get the rectangle specified by the clip style property!</button>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

getComputedStyle
getPropertyCSSValue
clip

External links:

Rect (W3C)

Digg Del.icio.us Reddit Facebook Twitter Diigo

User Contributed Comments

Rect object

Syntax:

Possible members:

Example HTML code 1:

Related pages:

External links:

Post Content