Signatur
Beschreibung
Die Eigenschaft cssFloat des Interfaces CSSStyleProperties entspricht der CSS-Eigenschaft float. Da float in älteren ECMAScript-Versionen ein reserviertes Wort war, hat man für den DOM-Zugriff den Namen cssFloat gewählt. Mögliche Werte sind unter anderem "left", "right", "none", "inline-start" und "inline-end".
Man nutzt sie typischerweise über element.style (Inline-Stile) oder über das von getComputedStyle() gelieferte Objekt, das nur gelesen werden kann. Über element.style.cssFloat sieht man nur den Inline-Stil. Werte aus Stylesheets bekommt man so nicht. Den tatsächlich wirksamen Wert liefert getComputedStyle(el).cssFloat.
Moderne Browser erlauben inzwischen auch style.float als Alias. Gleichwertig und am robustesten sind cssFloat oder style.setProperty("float", …) bzw. getPropertyValue("float").
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value | string | "" | Beim Setzen: gültiger float-Wert wie "left", "right", "none", "inline-start", "inline-end" oder ein globaler Wert ("inherit", "initial", "unset"). Mit einem leeren String entfernt man den Inline-Wert. |
Rückgabewert
float-Wert als String. Ist bei element.style kein Inline-Wert gesetzt, kommt ein leerer String "" zurück.Beispiele
Bild per Inline-Stil nach rechts floaten
const img = document.querySelector("img.teaser");
img.style.cssFloat = "right";
img.style.marginLeft = "1rem";
console.log(img.style.cssFloat);Wirksamen Wert aus dem Stylesheet lesen
// CSS: .sidebar { float: left; }
const sidebar = document.querySelector(".sidebar");
console.log(`Inline: "${sidebar.style.cssFloat}"`);
console.log(`Berechnet: "${getComputedStyle(sidebar).cssFloat}"`);Float umschalten und wieder entfernen
const box = document.getElementById("infobox");
const toggleFloat = () => {
box.style.cssFloat = box.style.cssFloat === "left" ? "" : "left";
};
toggleFloat();
console.log(box.style.cssFloat); // "left"
toggleFloat();
console.log(box.style.cssFloat === ""); // Inline-Wert entferntGleichwertige Alternativen mit setProperty
const el = document.createElement("div");
el.style.setProperty("float", "inline-start");
console.log(el.style.cssFloat);
console.log(el.style.getPropertyValue("float"));// Wichtig · Fallstricke
- Nur Inline-Werte:
element.style.cssFloatliefert keine Werte aus Stylesheets. Dafür braucht mangetComputedStyle(), dessen Ergebnis nur gelesen werden kann. Ein Schreibversuch darauf wirft einenNoModificationAllowedError. - Ungültige Werte wie
"center"werden stillschweigend ignoriert. Es gibt keinen Fehler, der vorherige Wert bleibt einfach bestehen. - Altes IE: Internet Explorer bis Version 8 kannte nur
styleFloat. In heutigen Browsern spielt das keine Rolle mehr. - Den Alias
style.floatunterstützen erst neuere Browserversionen. Für maximale Kompatibilität nimmt mancssFloatodersetProperty("float", …). - Früher hieß das Interface
CSSStyleDeclaration. Die Eigenschaft funktioniert unabhängig vom Interface-Namen in allen Browsern. - In Flex- und Grid-Containern hat
floatauf die Kindelemente keine Wirkung. Und wenn ein Element absolut positioniert ist, berechnet sichfloatzunone.