CSSStyleDeclaration.cssFloat — Eigenschaft · JavaScript-Referenz

Signatur

CSSStyleDeclaration.cssFloat

Beschreibung

Die Eigenschaft cssFloat eines CSSStyleDeclaration-Objekts steht für die CSS-Eigenschaft float. Beim Lesen erhält man dasselbe Ergebnis wie mit getPropertyValue("float"). Beim Schreiben entspricht sie setProperty("float", wert).

Der Umweg über den Namen cssFloat hat einen historischen Grund: float war in frühen ECMAScript-Versionen ein reserviertes Wort. Deshalb konnte man die Eigenschaft nicht einfach als style.float ansprechen. Moderne Browser unterstützen zusätzlich den Alias style.float, doch cssFloat bleibt der standardisierte und überall verfügbare Name.

In der Praxis nutzt man cssFloat vor allem, um per Skript Bilder oder Kästen umfließen zu lassen (left, right, none, inline-start, inline-end). Man kann damit auch den berechneten Wert über getComputedStyle() auslesen. Das von getComputedStyle() zurückgegebene Objekt ist allerdings schreibgeschützt.

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Wert von float, z. B. "left", "right" oder "none". Bei Inline-Styles ist das Ergebnis ein leerer String "", wenn kein Wert gesetzt ist.

Beispiele

Bild per Skript nach rechts umfließen lassen

const img = document.createElement('img');
img.src = 'foto.jpg';
img.style.cssFloat = 'right';
img.style.marginLeft = '1rem';
document.body.append(img);

console.log(img.style.cssFloat);
console.log(img.style.getPropertyValue('float'));

right right

Berechneten float-Wert auslesen

const box = document.createElement('div');
document.body.append(box);

// Inline-Style ist leer, der berechnete Wert ist 'none'
console.log(JSON.stringify(box.style.cssFloat));
console.log(getComputedStyle(box).cssFloat);

"" none

Float umschalten und wieder entfernen

const aside = document.createElement('aside');
document.body.append(aside);

const toggleFloat = (el) => {
  el.style.cssFloat = el.style.cssFloat === 'left' ? '' : 'left';
};

toggleFloat(aside);
console.log(aside.getAttribute('style'));
toggleFloat(aside);
console.log(aside.getAttribute('style'));

float: left;

// Wichtig · Fallstricke

Name: Schreibt man style.float, funktioniert das nur in modernen Browsern. Sehr alte Internet-Explorer-Versionen kannten stattdessen nur styleFloat. cssFloat ist der standardisierte Name und die sichere Wahl.
Schreibschutz: Das Objekt aus getComputedStyle() kann man nicht verändern. Ein Zuweisungsversuch löst eine NoModificationAllowedError-DOMException aus.
Ungültige Werte: Einen unbekannten Wert wie "center" ignoriert der Browser stillschweigend. Der bisherige Wert bleibt dann erhalten.
Leerer String: Weist man einen leeren String "" zu, wird die Inline-Deklaration entfernt. Der Wert kann danach wieder aus Stylesheets kommen.
Flex und Grid: In Flex- und Grid-Containern hat float auf die Kindelemente keine Wirkung.

Siehe auch

CSSStyleDeclaration CSSStyleDeclaration.getPropertyValue() CSSStyleDeclaration.setProperty() CSSStyleDeclaration.removeProperty() Window.getComputedStyle() HTMLElement.style CSSNestedDeclarations.style