Style cssFloatEigenschaft
Style-Objekt
Definition und Verwendung
Die cssFloat-Eigenschaft legt die horizontale Ausrichtung eines Elements fest oder gibt sie zurück.
Syntax
Legen Sie die cssFloat-Eigenschaft fest:
Object.style.cssFloat="left|right|none|inherit"
Die cssFloat-Eigenschaft zurückgeben:
Object.style.cssFloat
| Wert | Beschreibung |
|---|---|
| left | Das Objekt/Element schwebt links vom Elternelement. |
| right | Das Objekt/Element schwebt rechts vom Elternelement. |
| none | Standard. Das Objekt/Element schwebt nicht. |
| inherit | Der Wert der cssFloat-Eigenschaft wird vom Elternelement geerbt. |
Browser-Unterstützung
Alle wichtigen Browser unterstützen die cssFloat-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".
Tipps und Hinweise
Hinweis:Wenn in einer Zeile zu wenig Platz für ein schwebendes Element ist, springt das Element in die nächste Zeile, und dieser Vorgang wird fortgesetzt, bis eine Zeile mit genügend Platz gefunden wird.
Beispiel
Beispiel
Klicken Sie auf die beiden Schaltflächen, um das Bild links oder rechts neben dem Text schweben zu lassen:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Beispiel-Tutorial(example.com)</title>
<script>
function floatRight(){
document.getElementById("img1").style.cssFloat="right";
}
function floatLeft(){
document.getElementById("img1").style.cssFloat="left";
}
</script>
</head>
<body>
<img id="img1" src="w3javascript.gif.html" width="100" height="132">
<p>Dies ist ein Absatz.</p>
<p>Dies ist ebenfalls ein Absatz.</p>
<input type="button" onclick="floatRight()" value="Rechts schweben">
<input type="button" onclick="floatLeft()" value="Links schweben">
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Beispiel-Tutorial(example.com)</title>
<script>
function floatRight(){
document.getElementById("img1").style.cssFloat="right";
}
function floatLeft(){
document.getElementById("img1").style.cssFloat="left";
}
</script>
</head>
<body>
<img id="img1" src="w3javascript.gif.html" width="100" height="132">
<p>Dies ist ein Absatz.</p>
<p>Dies ist ebenfalls ein Absatz.</p>
<input type="button" onclick="floatRight()" value="Rechts schweben">
<input type="button" onclick="floatLeft()" value="Links schweben">
</body>
</html>
Selbst ausprobieren »
Style-Objekt Andere Erweiterungen