HTMLStyleElement.type — Eigenschaft · JavaScript-Referenz

Signatur

HTMLStyleElement.type

Beschreibung

Die Eigenschaft type von HTMLStyleElement spiegelt das Inhaltsattribut type des <style>-Elements wider. Beim Lesen erhältst du den Attributwert als String, beim Schreiben wird das Attribut gesetzt. Fehlt das Attribut, ist der Rückgabewert ein leerer String "", nicht "text/css".

Früher gab type die Stylesheet-Sprache an. Heute ist CSS die einzige unterstützte Sprache, und laut HTML-Standard soll das Attribut entweder fehlen oder genau text/css enthalten (ohne Beachtung der Groß-/Kleinschreibung). Die Eigenschaft gilt deshalb als veraltet und wird vor allem noch in Altcode oder bei der Analyse bestehender Dokumente gebraucht.

Ein praktischer Nebeneffekt: Steht in type ein anderer Wert als text/css (z. B. "text/plain"), wendet der Browser das Stylesheet nicht an. Wird type nachträglich per Skript geändert, verarbeitet der Browser das Element neu – damit lässt sich ein Stylesheet ein- und ausschalten. Dafür ist disabled aber das sauberere Mittel.

Rückgabewert

Typ

string

Beschreibung

Der Wert des Attributs type, z. B. "text/css". Fehlt das Attribut, ist es ein leerer String "". Beim Schreiben wird der String unverändert als Attribut übernommen.

Beispiele

Typ eines vorhandenen Style-Elements auslesen

// HTML: <style id="theme" type="text/css">body { color: navy; }</style>
//       <style id="extra">p { margin: 0; }</style>
const theme = document.getElementById('theme');
const extra = document.getElementById('extra');

console.log(theme.type);
console.log(JSON.stringify(extra.type)); // Attribut fehlt

text/css ""

Style-Element dynamisch erzeugen

const style = document.createElement('style');
style.type = 'text/css'; // optional, weil CSS ohnehin der Standard ist
style.textContent = '.hinweis { background: #ffe08a; padding: .5rem; }';
document.head.append(style);

console.log(style.getAttribute('type'));
console.log(style.sheet instanceof CSSStyleSheet);

text/css true

Alle Style-Elemente mit unbekanntem Typ finden

// Prüft, welche <style>-Elemente der Browser wegen des Typs ignoriert
const ignoriert = [...document.querySelectorAll('style')]
  .filter((el) => el.type !== '' && el.type.toLowerCase() !== 'text/css');

ignoriert.forEach((el) => {
  console.warn('Nicht angewendet:', el.type, el);
});
console.log(`${ignoriert.length} Stylesheet(s) werden ignoriert`);

0 Stylesheet(s) werden ignoriert

Stylesheet über type deaktivieren (Altcode-Muster)

const style = document.createElement('style');
style.textContent = 'body { outline: 3px solid red; }';
document.head.append(style);

// Nicht-CSS-Typ: Das Stylesheet wird verworfen
style.type = 'text/plain';
console.log(style.sheet); // null

// Besser: disabled verwenden
style.type = 'text/css';
style.disabled = true;
console.log(style.sheet !== null, style.disabled);

null true true

// Wichtig · Fallstricke

Veraltet: Das Attribut type ist bei <style> überflüssig. Lass es in neuem Code weg. Validatoren warnen, wenn es gesetzt ist.
Leerer String statt Standardwert: Ohne Attribut liefert type "". Frage also nicht auf === 'text/css' ab, wenn du „ist CSS“ meinst.
Andere Typen werden ignoriert: Ein Wert wie text/less oder text/plain sorgt dafür, dass der Browser kein Stylesheet erzeugt (sheet ist dann null). Manche Werkzeuge nutzen das gezielt, um Quelltext für einen Präprozessor abzulegen.
Zum Ein- und Ausschalten eines Stylesheets ist HTMLStyleElement.disabled bzw. CSSStyleSheet.disabled gedacht, nicht das Ändern von type.
Kompatibilität: Wird von allen Browsern unterstützt. Es gibt keine Unterschiede, die in der Praxis eine Rolle spielen.

Siehe auch

HTMLButtonElement.type HTMLStyleElement.sheet HTMLStyleElement.media HTMLStyleElement.disabled HTMLStyleElement.blocking