Bootstrap „media queries“ in JavaScript nutzen

Cowboy Stiefel
BootstrapJavaScript

Bootstrap ist ein mächtiges CSS Framework und ich verwende es in fast allen meinen Projekten. In diesem Artikel präsentiere ich euch ein paar meiner Hilfsmittel, um Bootstrap Breakpoints auch via JavaScript zugänglicher zu machen.

Alle Beispiel beziehen sich auf Bootstrap 5, lassen sich aber auch einfach auf andere Versionen anpassen.

Tip 1: Das Bootstrap Breakpoint Objekt

Um leicht Zugriff auf den gewünschten Breakpoint zu erhalten, erstelle ich als Basis ein Objekt, das alle Breakpoints enthält.

breakpoints = {
	xs: '0',
	sm: '576px',
	md: '768px',
	lg: '992px',
	xl: '1200px',
	xxl: '1400px',
};

Und so bekommst du Zugriff auf den gewünschten Breakpoint: breakpoints.md

Tip 2: Bootstrap „media queries“ als Funktion nutzen

Diese Funktion erleichtert das schreiben von „media queries“ im JavaScript.

function media_query(direction, breakpoint) {
	return window.matchMedia('(' + direction + ': ' + breakpoints.breakpoint + ')').matches;
}

console.log(media_query('min-width', 'md'));

Der Funktion media_queries werden die Paramater direction (min-width oder max-width) und breakpoint (sm, md, …) übergeben..

Tip 3: Aktuellen Bootstrap Breakpoint als Attribute in <body>

Die folgende Funktion schreibt den aktuellen Breakpoint als data Attribute in das <body> tag.

function set_current_breakpoint_on_body() {
	for (const [breakpoint, value] of Object.entries(breakpoints)) {
		if (media_query('min-width', breakpoint)) {
			document.querySelector('body').setAttribute('data-breakpoint', breakpoint);
		}
	}
}

Mittels CSS kann nun direkt auf das Attribute body[data-breakpoint="md"] zugegriffen werden.

Schreibe einen Kommentar