CSS Klassen mit Javascript ändern?
Hallo!
Obwohl ich schon etwas Erfahrung mit CSS und Javascirpt habe, bin ich gerade das erste mal auf folgendes Problem gestoßen:
Ich habe für eine Website im Kopf in einem <style> - Bereich einige Klassen definiert.
(z.B.:
.header { border:1px outset gray; margin:.5em; padding:.5em; border-radius: 50%; height: 8%; width: 90%; }
und unten im body dann:
<div class="header">)
Den Stil dieser Klassen will ich durch Javascript dynamisch ändern.
Javascript soll also nicht den style von einzelnen HTML-Elementen ändern, und auch nicht HTML-Elementen neue Klassen zuweisen. Vielmehr soll der Stil der Klasse direkt geändert werden, so daß sich die Änderung auf alle Elemente dieser Klasse auswirkt.
Konkret möchte ich das Layout dynamisch an die Größe des Browserfensters anpassen. Ein onResize Eventhandler im Body löst eine Javascript-Funktion aus, die entsprechende Änderungen im Layout vornimmt. Dabei wäre es natürlich praktisch, wenn man ähnlich aussehende Elemente (= gleiche class = gleicher CSS-style) auch zusammen anpassen könnte, und zwar auch mit errechneten Werten (z.B. Math.floor(clientHeight / 2)).
Habe lange gegoogelt und auf den üblichen Plattformen gesucht, habe aber immer nur Anleitungen gefunden, wie man Elementen neue Klassen zuweist.
Im Moment löse ich das Problem mit einer for-Schleife:
const AllHeaders = document.getElementsByClassName("header");
for (let i = 0; i < AllHeaders.length; i++) {
var Radius = Math.floor(AllHeaders[i].clientHeight / 2)
AllHeaders[i].style.borderRadius = Radius.toString() + "px";
}
und so weiter, für alle Klassen einzeln.
Das kann irgendwie doch nicht die beste Lösung sein...
Es muß doch eine Möglichkeit geben, auf die Klassen-Definitionen im Stylesheet mit Javascript zuizugreifen. Ansonsten wäre die Funktionalität von CSS doch stark eingeschränkt.
Hoffe, jemand kennt sich aus...
4 Antworten
Wenn es sich darauf beschränkt verschiedene styles bei verschiedenen Größen des Fensters zu haben hat CSS dort die integrierte Funktion @media. Zum Beispiel kannst du im CSS Code schreiben
@media only screen and (max-width: 600px) {
body {
background-color: blue;
}
}
Dieses Beispiel verursacht eine Blaufärbung des Body sobald das Fenster kleiner gleich 600px ist.
In CSS kannst du auch rechnen:
für clientHeight / 2 kannst du in CSS auch als Wert calc(100vw / 2) schreiben
Das wußte ich tatsächlich noch nicht.. ging das schon immer?
Das könnte für mein momentanes Problem tatgsächlich der entscheidende Hinweis sein.
Ganz großen Dank dafür.
Trotzdem, aus reinem Interesse, wüde ich immer noch gern wissen, wie man mit Javascript auf ein Stylesheet zugeifen kann. Auf die Styles von einzelnen Elementen kann man ja auch direkt zugreifen. Ich sehe keinen logischen Grund, warum das nicht gehen sollte, und die Möglichkeiten wären ja enorm (nicht nur für responives Design).
Klar kann man auf die CSS Definitionen zugreifen, allerdings macht das halt keiner, weil es wie auch schon von anderen Antworten genannt oder mit Media queries (@media) und dem calc viel besser geht.
Aber letztenendes würde ich es (wenn ich es so umsetzen müsste auch nicht viel anders machen als Destranix es bereits in einem Kommentar gepostet hat.
Also willst du einfach die CSS-Klasse bearbeiten? Dafür kannst du das (bzw. ein) CSSStyleSheet Objekt benutzen.
Beispiel:
<head>
<style id="richtigstylisch">
.header {
border: 1px outset gray;
margin: .5em;
padding: .5em;
border-radius: 50%;
height: 8%;
width: 90%;
}
</style>
</head>
<body>
<!-- ... -->
<script>
// wenn du keine ID/Klasse vergeben hast, kannst
// du auch document.styleSheets[x].rules benutzen
let regeln = Array.from(document.querySelector(".richtigstylisch").sheet.rules);
let header = regeln.find(r => r.selectorText == ".header");
if (!header) {
console.error("Regel für den Header nicht gefunden");
}
else {
let radius = 1 + 2; // komplexe Berechnung o.O
header.style.borderRadius = radius + "px";
}
</style>
</body>
Weil es ja schon alle anderen geschrieben haben, schreibe ich doch auch nochmal so als Haufenverstärker, dass man das trotzdem eigentlich mit den CSS-Media Queries machen sollte, weil das performanter ist (also ruckelt vielleicht bischen weniger wenn es ausgeführt wird) 😁
Support für die CSS-Funktion Calc kannst du auf hier nachgucken (je nach Browser-Support den du unterstützen willst):
Habe mir calc() gerade mal angeschaut.
Soweit ich sehe, kann ich nur Angaben machen, die sich entweder auf feste Werte oder auf die Styleangabe selbst beziehen (also, wenn ich width: calc(50% + 1px) schreibe, dann sind das 50% der Breite, ich kann mich nicht auf die Höhe des Elements beziehen).
Nehmen wir folgendes an:
Ich habe ein <div>, das sich über die Breite des Bildschirms erstreckt und das 7% der Höhe einnimmt, also praktisch einen Streifen am oberen Bildschirmrand. Die beiden Enden sollen halbkreisförmig abgerundet sein, der border-radius also 50% der Höhe betragen. Wenn ich einfach border-radius: 50% schreibe, erhalte ich eine Ellipse, da der Y-Radius sich auf die Breite bezieht. Jetzt müßte ich etwa schreiben: border-radius: 50% calc(heigth / 2). Wobei es aber height (des Elternelements) für calc offenbar nicht gibt.
Hoffe, ich nerve nicht, finde das gerade sehr interessant.
"Klar kann man auf die CSS Definitionen zugreifen, allerdings macht das halt keiner"
Da hast du mich natürlich auch am Haken - auch wenn das halt keiner macht - wenn Du weißt, wie das geht (also für die im Stylesheet defineirten Klassen, nicht für einzelne HTML-Elemente), dann fände ich es wirklich toll, wenn du mir einen Hinweis geben könntest.
ich kann mich nicht auf die Höhe des Elements beziehen
Da musst du dann nicht mit % sonder mit vw und vh arbeiten. vw steht für Visual Width und vh für Visual Height. 50vw wären also das gleiche wie 50%. und 50vh sind dann halt 50% in der Höhe.
dann fände ich es wirklich toll, wenn du mir einen Hinweis geben könntest.
Wie gesagt würde ich es nicht anders machen Destranix es bereits gepostet hat, da ich es allerdings selber so gemacht habe hab ich da auch kein Code Beispiel parat.
Ok, sorry für die Nachfrage, in der Doku die ich gelesen habe, stand, daß vh für Viewport Height steht...
Wenn es sich direkt auf das Elternelement bezieht, macht das natürlich mehr Sinn.
In diesem Sinne, lieben Dank!
Super - ganz herzlichen Dank.
Schön, daß jemand mal meine Frage beantwortet, statt mir nur zu sagen, was ich nicht machen soll.
Ich weiß das wirklich zu schätzen.
Klar, Media Queries sind für die meisten Situationen der Königsweg, und ich habe auch so noch den ein oder anderen guten Tip mitbekommen. Aber eine richtige Programmiersprache bietet eben doch unendlich viel mehr Möglichkeiten, wenn man was spezielles machen will.
Und daß ein Stylesheet eben tatsächlich ein Objekt ist und einen Platz im DOM hat, habe ich vermutet, habe aber nirgendwo die Doku gefunden.
Also nochmal ganz herzlichen Dank!
Hi Dungeoneer,
es gibt leichtere Wege um eine Lösung für dein Problem zu generieren. Schaue mal die anderen Antworten der Community zu deiner Frage an. Aber ich möchte dir gerne auch teils deine Frage beantworten wie man mithilfe von JavaScript CSS-Klassen und deren Eigenschaften und Werte ändern kann. Dafür gibt es eine interesannte Lösung.
Hier ein Beispiel von mir in JavaScript:
'use strict';
let stylesheet;
document.addEventListener("DOMContentLoaded", function() {
stylesheet = document.styleSheets[0];
for (var i = 0; i < stylesheet.cssRules.length; i++) {
let rule = stylesheet.cssRules[i];
if (rule.selectorText === '.my-class') {
rule.style.color = 'red';
rule.style.backgroundColor = 'yellow';
}
}
});
Hier die Links zum Thema:
https://developer.mozilla.org/en-US/docs/Web/API/Document/styleSheets
https://www.mediaevent.de/javascript/insert-remove-rule.html
Ich hoffe diese Antwort hilft dir das besser zu verstehen. Ich würde dir aber empfehlen andere Wege zu gehen. Zwar ist es nicht falsch mit JavaScript CSS-Eigenschaften aus Klassen zu ändern, aber es wäre besser andere Wege und Methoden zu gehen, um dein Problem zu lösen.
Viel Erfolg Dungeoneer
Generell solltest du das direkt mit CSS und Media Queries machen:
https://www.mediaevent.de/css/media-queries.html
Relativ neu aber schon praktisch verwendbar sind auch Container Queries:
https://kulturbanause.de/blog/css-container-queries-mit-container/
Wenn es unbedingt mit Javascript sein soll, dann würde ich folgenden Weg vorschlagen. Lege dir Basisklassen für deine Breakpoints an, die du jeweils einmal im Body setzt. Deine anderen Klassen bekommen dann besondere Werte, wenn sie Kind einer Basisklasse sind.
.header {
display: block;
}
.base-smartphone .header {
display: none;
}
HTML
<body class="base-smartphone">
<header class="header"><!-- unsichtbar -→</header>
Je nach Größe änderst du dann die Klassen einmalig im Body-Element.
Das läuft alles auf eine Sammlung von statischen Styles hinaus, zwischen denen ich umschalte. Im Prinzip kann ich das schon, auch wenn ich die Container Queries noch nicht kannte- danke für den Hinweis.
Ich würde es für viel logischer und einfacher halten, in die Stylesheetangaben zu schreiben, und mich interessiert im Moment, ob und wie das möglich ist. Ich weiß schon, daß es nicht das Standardverfahren ist, sonst hätte ich es wohl auch schon gefunden.
Ich weiß icht, ob das überhaupt geht. Es ist jedoch mit Abstand die schlechteste Lösung für dein Vorhaben. Ich würde dir davon auf jeden Fall abraten.
Also meines Wissens nach geht das nur, indem du im "head" des Dokuments einen "style"-Block anlegst und da dann entsprechendes reinschreibst.
Das habe ich ja gemacht, wie beschrieben.
Aber wie greife ich dann darauf mitJavascript zu?
Der Style-Block ist ein Element deines Dokuments. Darin steht ein Text, den du verändern kannst.
Spezielle Methoden für CSS gibt es da nicht. Vielleicht finden sich aber irgendwo Bibliotheken dafür.
Ein Beispiel, das ich gerade rausgesucht habe:
var style = document.createElement("style");
style.setAttribute("type", "text/css");
style.appendChild(document.createTextNode(
".Hovercard-profile.hovered{\r\n"+
" color: #3a80a3 !important;\r\n"+
"}\r\n"+
".Button--flatBlue.hovered{\r\n"+
" background-color: #3a80a3 !important;\r\n"+
" border-color: #3a80a3 !important;\r\n"+
" color: #fff !important;\r\n"+
"}\r\n"
));
head.appendChild(style);
So ähnlich habe ich es auch gemacht.
Und wie ändere ich das jetzt mit Javascript?
Wenn ich mit Javascript ins Dokument schreiben will, dann geht das mit
Element.innerHTML = "Text":
Das Stylesheet ist aber kein HTML-Element und hat kein innerHTML (oder?)
Auf Styles greift man normalerweise über "style" zu, z.B.:
document.getElementById("header1").style.fontSize = "20px"
Aber das ist dann der Style eines einzelnen Elements. Ich möchte auf die class zugreifen. Und ich kann mir kaum vorstellen, daß das einfach nicht geht.
Du musst das mittels einer Style-Node machen:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style
Du müsstest zudem auf "textContent" zugreifen:
https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent#differences_from_innertext
Ich würde aber lieber, so wie im Beispiel gezeigt, ein neues Style-Element für alle deine dynamischen Styles erstellen, dann kommst du nicht durcheinander mit Text, der anderweitig da reingeschrieben wird und es gibt dann auch weniger Probleme mit Zugriffen aus verschiedenen Funktionen und so.
Und ich kann mir kaum vorstellen, daß das einfach nicht geht.
Ist aber wohl so. Du kannst die bestehende Klasse nicht verändern, du kannst aber neue Definitionen erstellen, die die alten überschreiben.
Musst du aber im Internet schauen, in welcher reihenfolge die Definitionen angewendet werden, damit du weißt, wo du das hinpacken musst, damit das überschreibt. das "!important" sorgt auch für überschreiben, würde ich aber nur verwenden, wenn ich es brauche. Ansonsten ist irrc auch die Reihenfolge der Stylesheets und Style-Nodes relevant.
Man kann auch einem Style-Tag im Header ein id-Attribut geben und danach via JS auf dieses Style zugeifen.
Ja, wenn es sich vermeiden lässt würde ich generell nicht das Style-Tag im Head verwenden und immer css-Dateien einbinden. Auch würde ich dann keine existenten Stile ändern, sondern immer die Elemente.
Die Styles sollen dynamisch erzeugt werden, also einzelne Werte errechnet, ich muß also mit Javascript zugreifen.
Einen festen Style zuweisen wäre kein Problem, das war nicht die Frage (trotzdem danke für den Hinweis).