YouTipJavaScript Reference Manual
OverviewJavaScript Objects
JavaScript Array ObjectJavaScript Boolean ObjectJavaScript Date ObjectJavaScript Math ObjectJavaScript Number ObjectJavaScript String ObjectJavaScript RegExp ObjectJavaScript Global Properties/FunctionsJavaScript OperatorsJavaScript Error
Browser Objects
Window ObjectNavigator ObjectScreen ObjectHistory ObjectLocation ObjectStorage Objects
DOM Objects
HTML DOM Document ObjectHTML DOM Element ObjectHTML DOM Attribute ObjectHTML DOM Event ObjectHTML DOM Console ObjectCSSStyleDeclaration ObjectDOM HTMLCollection
HTML Objects
<a><area><audio><base><blockquote><body><button><canvas><col><colgroup><datalist><del><details><dialog><embed><fieldset><form><iframe><frameset ><img><ins><input> - button<input> - checkbox<input> - color<input> - date<input> - datetime<input> - datetime-local<input> - email<input> - file<input> - hidden<input> - image<input> - month<input> - number<input> - password<input> - radio<input> - range<input> - reset<input> - search<input> - submit<input> - tel<input> - text<input> - time<input> - url<input> - week<label><li><link><map><meta><meter><object><ol><optgroup><option><output><param><progress><q><script><select><source><span><style><table><td><textarea><time><th><tr><track><ul><video>
HTML DOM Style clip Property
Instance
Return the clipping region of an image:
document.getElementById("myImg").style.clip
Try it »
Definition and Usage
The clip property sets or returns the visible part of a positioned element.
Note: If "position:static", the clip property will not work.
Note: The clip property is deprecated. Please use the clip-path property as an alternative.
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| clip | 1.0 | 8.0 | 1.0 | 1.0 | 7.0 |
Syntax
Return the clip property:
Set the clip property:
Property Values
| Value | Description |
|---|---|
| rect(top, right, bottom, left) | Clips an absolutely positioned element. The value comes from offsetting from the element's top-left corner. The four parameters: top: top offset right: right offset bottom: bottom offset left: left offset |
| auto | Default value. No clipping. |
| initial | Sets this property to its default value. Please read about initial. |
| inherit | Inherits this property from its parent element. Please read about inherit. |
Technical Details
| Default Value: | auto |
|---|---|
| Return Value: | A String, representing the clipping region of a positioned element |
| CSS Version | CSS2 |
More Examples
Example
Set the clipping region of an image:
document.getElementById("myImg").style.clip = "rect(0px 50px 200px 0px)";
Try it »
Example
Change the clipping region of an image:
document.getElementById("myImg").style.clip = "rect(100px 250px 300px 100px)";
Try it »
Example
Return the current clipping region using alert:
alert(document.getElementById("myImg").style.clip);
Try it »
Related Pages
CSS Tutorial: CSS clip
CSS Reference: clip property
HTML DOM Reference: Style object
Novice Tutorial Services
Novice Tutorial Featured Topics
Novice Tutorial HTML/CSS/JS Online Tools
Novice Tutorial HTML/CSS/JS Exam
Novice Tutorial HTML/CSS/JS Quiz