Style clipEigenschaft
Style-Objekt
Definition und Verwendung
Die clip-Eigenschaft legt den sichtbaren Teil eines positionierten Elements fest oder gibt ihn zurück.
Syntax
Die clip-Eigenschaft festlegen:
Object.style.clip="auto|rect(top right bottom left)|inherit"
Die clip-Eigenschaft zurückgeben:
Object.style.clip
| Wert | Beschreibung |
|---|---|
| auto | Standard. Das Element wird nicht beschnitten. |
| rect(top right bottom left) | Die Form des beschnittenen Bereichs wird durch vier Koordinaten definiert. |
| inherit | Der Wert der clip-Eigenschaft wird vom übergeordneten Element geerbt. |
Browser-Unterstützung
Alle gängigen Browser unterstützen die clip-Eigenschaft.
Hinweis:IE7 und frühere Versionen unterstützen den Wert "inherit" nicht. IE8 unterstützt "inherit" nur, wenn ein !DOCTYPE angegeben ist. IE9 unterstützt "inherit".
Beispiel
Beispiel
Das Bild auf eine angegebene Form zuschneiden:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Beispiel (example.com)</title>
<style type="text/css">
img{
position:absolute;
top:100px;
}
</style>
<script>
function clipImage(){
document.getElementById("img1").style.clip="rect(0px 75px 75px 0px)";
}
function clearClip(){
document.getElementById("img1").style.clip="auto";
}
</script>
</head>
<body>
<img id="img1" src="w3javascript.gif.html" width="100" height="132">
<input type="button" onclick=clipImage() value="Bild zuschneiden">
<input type="button" onclick=clearClip() value="Bild nicht zuschneiden">
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Beispiel (example.com)</title>
<style type="text/css">
img{
position:absolute;
top:100px;
}
</style>
<script>
function clipImage(){
document.getElementById("img1").style.clip="rect(0px 75px 75px 0px)";
}
function clearClip(){
document.getElementById("img1").style.clip="auto";
}
</script>
</head>
<body>
<img id="img1" src="w3javascript.gif.html" width="100" height="132">
<input type="button" onclick=clipImage() value="Bild zuschneiden">
<input type="button" onclick=clearClip() value="Bild nicht zuschneiden">
</body>
</html>
Selbst ausprobieren »
Style-Objekt Andere Erweiterungen