HTMLInputElement.alpha — Eigenschaft · JavaScript-Referenz

Signatur

HTMLInputElement.alpha

Beschreibung

Die Eigenschaft alpha von HTMLInputElement spiegelt das boolesche Inhaltsattribut alpha wider. Sie ist nur bei Farbwählern (<input type="color">) wirksam. Ist sie true, kann der Endbenutzer im Farbwähler zusätzlich zu Rot, Grün und Blau auch die Alpha-Komponente (Transparenz bzw. Deckkraft) der Farbe einstellen.

Wie bei allen widergespiegelten booleschen Attributen gilt: Beim Lesen liefert die Eigenschaft true, sobald das Attribut vorhanden ist, egal mit welchem Wert (auch alpha="false" ergibt true). Beim Setzen auf true wird das Attribut alpha="" hinzugefügt, beim Setzen auf false wird es entfernt.

Mit aktiviertem Alpha ändert sich auch das Format von value: Statt des klassischen Hex-Formats #rrggbb serialisiert der Browser die Farbe als CSS-Farbwert mit Alpha-Kanal, z. B. color(srgb 1 0 0 / 0.5). Zusammen mit dem Attribut colorspace (Eigenschaft colorSpace) lassen sich so moderne Farbwähler bauen, etwa für Design-Tools, Theme-Editoren oder Overlays, ohne ein zusätzliches Schieberegler-Element für die Deckkraft.

Parameter

Name	Typ	Default	Beschreibung
$value (Setter)	boolean	false	Beim Zuweisen wird der Wert in einen Boolean umgewandelt: `true` setzt das Attribut `alpha`, `false` entfernt es.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn das Attribut alpha gesetzt ist und damit die Alpha-Komponente wählbar ist, sonst false.

Beispiele

Alpha-Auswahl per JavaScript aktivieren

// <input type="color" id="bg" value="#ff0000">
const picker = document.querySelector('#bg');

console.log(picker.alpha); // false
picker.alpha = true;
console.log(picker.alpha); // true
console.log(picker.hasAttribute('alpha')); // true

false true true

Feature-Erkennung mit Fallback-Schieberegler

const picker = document.querySelector('#overlay-color');
const opacitySlider = document.querySelector('#overlay-opacity');

if ('alpha' in HTMLInputElement.prototype) {
  // Browser unterstützt Alpha im Farbwähler nativ
  picker.alpha = true;
  opacitySlider.hidden = true;
} else {
  // Fallback: eigener Schieberegler für die Deckkraft
  opacitySlider.hidden = false;
}

console.log('Native Alpha-Unterstützung:', 'alpha' in HTMLInputElement.prototype);

Native Alpha-Unterstützung: true // bzw. false in älteren Browsern

Gewählte Farbe mit Transparenz anwenden

// <input type="color" id="theme" alpha>
const picker = document.querySelector('#theme');
const preview = document.querySelector('.preview');

picker.addEventListener('input', () => {
  // Bei alpha=true ist value ein CSS-Farbwert inkl. Alpha,
  // z. B. "color(srgb 0.2 0.4 1 / 0.5)" – direkt in CSS nutzbar
  preview.style.backgroundColor = picker.value;
  console.log('Neue Farbe:', picker.value);
});

Neue Farbe: color(srgb 0.2 0.4 1 / 0.5)

// Wichtig · Fallstricke

Browser-Unterstützung: Das Attribut ist eine recht neue Ergänzung des HTML-Standards und wird bisher nur von einzelnen Browsern (zuerst WebKit/Safari) unterstützt. Vor der Nutzung per 'alpha' in HTMLInputElement.prototype prüfen und einen Fallback vorsehen. In nicht unterstützenden Browsern ist alpha einfach eine gewöhnliche Objekteigenschaft ohne Wirkung.
Nur bei type="color" wirksam: Bei anderen Input-Typen lässt sich die Eigenschaft zwar setzen, sie hat aber keinen Effekt.
Geändertes value-Format: Code, der value als #rrggbb parst (z. B. per Regex oder parseInt(value.slice(1), 16)), bricht, sobald alpha aktiv ist. Wert entweder direkt als CSS-Farbe verwenden oder robust parsen.
Boolesches Attribut: alpha="false" im HTML aktiviert Alpha trotzdem. Zum Deaktivieren das Attribut entfernen bzw. input.alpha = false setzen.
Das Aussehen des Farbwählers (Alpha-Regler) ist browser- und betriebssystemabhängig und lässt sich nicht per CSS gestalten.

Siehe auch

DeviceOrientationEvent.alpha HTMLInputElement.alt HTMLInputElement.list HTMLInputElement.type HTMLInputElement.value