HTMLLinkElement.type — Eigenschaft · JavaScript-Referenz

Signatur

HTMLLinkElement.type

Beschreibung

Die Eigenschaft type der Schnittstelle HTMLLinkElement ist ein String, der das Inhaltsattribut type eines <link>-Elements widerspiegelt. Sie gibt den MIME-Typ der verlinkten Ressource an, etwa "text/css", "image/svg+xml", "font/woff2" oder "application/rss+xml".

Der Wert ist ein Hinweis für den Browser: Kennt er den angegebenen Typ nicht, kann er die Ressource gar nicht erst laden. Das ist praktisch bei rel="preload" oder rel="icon", damit Browser ohne Unterstützung für ein Format (z. B. AVIF oder WOFF2) keine unnötigen Downloads starten. Bei rel="alternate" beschreibt type das Format der alternativen Darstellung, z. B. einen RSS- oder Atom-Feed.

Ist das Attribut nicht gesetzt, liefert die Eigenschaft einen leeren String "". Wenn man der Eigenschaft einen Wert zuweist, wird das HTML-Attribut direkt angepasst. Der Browser prüft dabei nicht, ob der String ein gültiger MIME-Typ ist.

Rückgabewert

Typ

string

Beschreibung

Der MIME-Typ aus dem type-Attribut, oder "", wenn das Attribut fehlt. Beim Setzen wird das Attribut aktualisiert.

Beispiele

MIME-Typen aller Stylesheet-Links auslesen

// HTML: <link rel="stylesheet" href="/css/main.css" type="text/css">
const links = document.querySelectorAll('link[rel="stylesheet"]');

for (const link of links) {
  console.log(`${link.href} → ${link.type || '(kein type gesetzt)'}`);
}

https://example.com/css/main.css → text/css

Schrift nur bei passender Unterstützung vorladen

const preloadFont = (url, mime) => {
  const link = document.createElement('link');
  link.rel = 'preload';
  link.as = 'font';
  link.href = url;
  link.type = mime;          // Browser ohne Unterstützung überspringen den Download
  link.crossOrigin = 'anonymous';
  document.head.append(link);
  return link;
};

const font = preloadFont('/fonts/inter.woff2', 'font/woff2');
console.log(font.type);
console.log(font.getAttribute('type'));

font/woff2 font/woff2

RSS- oder Atom-Feed der Seite finden

const feedTypes = ['application/rss+xml', 'application/atom+xml'];

const feeds = [...document.querySelectorAll('link[rel="alternate"]')]
  .filter((link) => feedTypes.includes(link.type.toLowerCase()))
  .map(({ href, title, type }) => ({ href, title, type }));

console.log(feeds);

[{ href: 'https://example.com/feed.xml', title: 'Blog-Feed', type: 'application/rss+xml' }]

Favicon-Format zur Laufzeit ändern

const icon = document.querySelector('link[rel="icon"]') ?? document.head.appendChild(
  Object.assign(document.createElement('link'), { rel: 'icon' })
);

icon.type = 'image/svg+xml';
icon.href = '/favicon.svg';
console.log(icon.outerHTML);

// Wichtig · Fallstricke

Keine Prüfung: Die Eigenschaft nimmt jeden String an. Ein Tippfehler wie "text/cs" kann dazu führen, dass ein Stylesheet oder Preload stillschweigend ignoriert wird, weil der Browser den Typ nicht kennt.
Groß-/Kleinschreibung: Der Wert wird genau so zurückgegeben, wie er gesetzt wurde. MIME-Typen sollte man für Vergleiche vorher mit toLowerCase() vereinheitlichen.
Kein Content-Type-Ersatz: type ist nur ein Hinweis. Welcher Typ tatsächlich gilt, bestimmt der Content-Type-Header des Servers. Bei Stylesheets prüfen Browser im Standards-Modus zusätzlich, ob der Server text/css liefert.
Stylesheets: Bei rel="stylesheet" ist type="text/css" überflüssig, weil es der Standardwert ist. Ein anderer, unbekannter Typ verhindert, dass das Stylesheet angewendet wird.
Kompatibilität: Wird von allen modernen Browsern seit langem unterstützt.

Siehe auch

HTMLEmbedElement.type HTMLLinkElement.as HTMLLinkElement.href HTMLLinkElement.rel HTMLLinkElement.sheet