Kann man einer SVG via JavaScript eine Klasse hinzufügen?

Question

Kann man einer SVG via JavaScript eine Klasse hinzufügen?

Antwort

Verwandte Fragen

Kann man einem SVG ohne ID mit JS eine Klasse hinzufügen?

Kann man einem SVG ohne ID eine Klasse hinzufügen?

Wie entferne ich automatisch Punkte und Leerzeichen aus einem HTML-Eingabefeld mit eigenem JavaScript?

Wie entferne ich automatisch Punkte und Leerzeichen aus einem HTML-Eingabefeld?

Wie entferne ich den Blur-Effekt mit feComposite operator="out"?

Wie kann man in WordPress ein Bild per Klick des Nutzers umdrehen?

Wie binde ich 'primefaces/locales/primefaces-locales.js' korrekt ein?

Wie erstelle ich mit Bootstrap einen gelben Footer, in dem 4 SVG-Grafiken absolut am unteren Ende platziert sind?

Wie verhindere ich, dass mehrere Collapse-Elemente in Bootstrap 5 gleichzeitig geöffnet werden?

Wie realisiert man mit JavaScript unter Drupal 10, dass ein DIV beim Scrollen nach oben fixiert wird, wenn es 100 Pixel von oben entfernt ist?

Accepted Answer

Ja, du kannst einer SVG über JavaScript eine Klasse hinzufügen. Dazu kannst du die `classList`-Methode verwenden. Hier ist ein einfaches Beispiel: ```javascript // Angenommen, du hast ein SVG-Element mit der ID "mySvg" const svgElement = document.getElementById('mySvg'); // Füge eine Klasse hinzu svgElement.classList.add('neue-klasse'); ``` Stelle sicher, dass das SVG-Element im DOM vorhanden ist, bevor du versuchst, die Klasse hinzuzufügen.

Accepted Answer

Ja, du kannst einem SVG-Element ohne ID mit JavaScript eine Klasse hinzufügen. Dazu kannst du die Methode `querySelector` oder `getElementsByTagName` verwenden, um das SVG-Element auszuwähle... [mehr]

Accepted Answer

Ja, du kannst einem SVG-Element ohne ID mit JavaScript eine Klasse hinzufügen. Dazu kannst du die Methode `querySelector` oder `getElementsByTagName` verwenden, um das SVG-Element auszuwählen. Hier ist ein Beispiel, wie du das machen kannst: ```javascript // Beispiel: Hinzufügen einer Klasse zu einem SVG-Element const svgElement = document.querySelector('svg'); // Wählt das erste SVG-Element auf der Seite aus if (svgElement) { svgElement.classList.add('neue-klasse'); // Fügt die Klasse hinzu } ``` Wenn du mehrere SVG-Elemente hast und eine Klasse zu allen hinzufügen möchtest, kannst du `getElementsByTagName` verwenden: ```javascript const svgElements = document.getElementsByTagName('svg'); for (let i = 0; i < svgElements.length; i++) { svgElements[i].classList.add('neue-klasse'); // Fügt die Klasse zu jedem SVG-Element hinzu } ``` Diese Methoden ermöglichen es dir, SVG-Elemente auch ohne spezifische IDs zu manipulieren.

Accepted Answer

Ja, du kannst einem SVG-Element ohne ID eine Klasse hinzufügen. Dazu kannst du das `class`-Attribut direkt im SVG-Tag oder in den spezifischen Elementen innerhalb des SVGs verwenden. Hier ein Bei... [mehr]

Accepted Answer

Ja, du kannst einem SVG-Element ohne ID eine Klasse hinzufügen. Dazu kannst du das `class`-Attribut direkt im SVG-Tag oder in den spezifischen Elementen innerhalb des SVGs verwenden. Hier ein Beispiel: ```xml <svg class="deine-klasse" xmlns="http://www.w3.org/2000/svg" width="100" height="100"> <circle class="kreis-klasse" cx="50" cy="50" r="40" /> </svg> ``` In diesem Beispiel hat das SVG-Element selbst die Klasse "deine-klasse" und der Kreis innerhalb des SVGs hat die Klasse "kreis-klasse". Du kannst diese Klassen dann in CSS verwenden, um das Styling zu steuern.

Accepted Answer

Um automatisch Punkte und Leerzeichen aus einem HTML-Eingabefeld zu entfernen, kannst du ein kurzes JavaScript verwenden, das auf das `input`-Event reagiert. Hier ein Beispiel: ```html <input type... [mehr]

Accepted Answer

Um automatisch Punkte und Leerzeichen aus einem HTML-Eingabefeld zu entfernen, kannst du ein kurzes JavaScript verwenden, das auf das `input`-Event reagiert. Hier ein Beispiel: ```html <input type="text" id="meinFeld" placeholder="Eingabe ohne Punkte und Leerzeichen"> > document.getElementById('meinFeld').addEventListener('input', function(e) { // Entfernt alle Punkte und Leerzeichen this.value = this.value.replace(/[.\s]/g, ''); }); </script> ``` **Erklärung:** - Das Skript hört auf das `input`-Event des Feldes. - Mit `replace(/[.\s]/g, '')` werden alle Punkte (`.`) und Leerzeichen (`\s`) im aktuellen Wert entfernt. Das funktioniert rein clientseitig und benötigt keine weiteren Bibliotheken.

Accepted Answer

Um automatisch Punkte und Leerzeichen aus einem HTML-Eingabefeld zu entfernen, kannst du JavaScript verwenden. Das folgende Beispiel zeigt, wie du das beim Eintippen (oninput) erreichen kannst: ```ht... [mehr]

Accepted Answer

Um automatisch Punkte und Leerzeichen aus einem HTML-Eingabefeld zu entfernen, kannst du JavaScript verwenden. Das folgende Beispiel zeigt, wie du das beim Eintippen (oninput) erreichen kannst: ```html <input type="text" id="meinFeld" oninput="this.value = this.value.replace(/[. ]/g, '')"> ``` **Erklärung:** - `oninput` wird bei jeder Eingabe ausgelöst. - `replace(/[. ]/g, '')` entfernt alle Punkte (`.`) und Leerzeichen (` `) aus dem aktuellen Wert. **Hinweis:** Du kannst das Muster in der `replace`-Funktion anpassen, falls du noch weitere Zeichen entfernen möchtest. Weitere Infos zu [HTML input](https://developer.mozilla.org/de/docs/Web/HTML/Element/input) und [JavaScript replace](https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/String/replace) findest du auf MDN.

Accepted Answer

Der SVG-Filter-Effekt, den du beschreibst, verwendet das `<feComposite>`-Element mit dem Operator `"out"`. Dieser Operator entfernt die Bereiche von `in2` aus `in`. In deinem Beispiel:... [mehr]

Accepted Answer

Der SVG-Filter-Effekt, den du beschreibst, verwendet das `<feComposite>`-Element mit dem Operator `"out"`. Dieser Operator entfernt die Bereiche von `in2` aus `in`. In deinem Beispiel: ```xml <feComposite operator="out" in="SourceGraphic" in2="offset-display" result="inverse"></feComposite> ``` - `in="SourceGraphic"`: Das Originalbild. - `in2="offset-display"`: Ein zweites Bild, meist ein verschobener oder bearbeiteter Bereich. - `operator="out"`: Entfernt die Bereiche von `in2` aus `in`. **Unblur** bedeutet, einen Weichzeichner (Blur) rückgängig zu machen. Das ist mit SVG-Filtern nicht direkt möglich, da ein Blur-Filter Informationen entfernt, die nicht einfach wiederhergestellt werden können. Es gibt keinen SVG-Filter, der ein Bild "ent-blurrt". **Was macht dein Filter?** Mit dem `operator="out"` schneidest du Bereiche aus dem Originalbild aus, die im `offset-display` enthalten sind. Das ist kein "Unblur", sondern ein Maskieren/Ausschneiden. **Fazit:** - Ein "Unblur" ist mit SVG-Filtern technisch nicht möglich. - Der von dir genutzte Filter schneidet Bereiche aus, entfernt aber keinen Blur. - Um einen Blur rückgängig zu machen, bräuchtest du das Originalbild ohne Blur. **Weitere Infos zu SVG-Filtern:** - [MDN: feComposite](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feComposite) - [MDN: SVG Filter Effects](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Filter_effects) Falls du einen bestimmten Effekt erzielen möchtest, beschreibe bitte genauer, was du erreichen willst.

Accepted Answer

Um in WordPress ein Bild durch einen Klick eines Nutzers umzudrehen (z.B. horizontal oder vertikal spiegeln), kannst du JavaScript und etwas CSS verwenden. Hier ist eine einfache Möglichkeit, das... [mehr]

Accepted Answer

Um in WordPress ein Bild durch einen Klick eines Nutzers umzudrehen (z.B. horizontal oder vertikal spiegeln), kannst du JavaScript und etwas CSS verwenden. Hier ist eine einfache Möglichkeit, das umzusetzen: **1. Bild in einen Beitrag oder eine Seite einfügen** Füge das Bild wie gewohnt in deinen Beitrag oder deine Seite ein. Gib dem Bild eine eindeutige CSS-Klasse oder ID, z.B. `class="drehbild"`. **2. JavaScript und CSS hinzufügen** Füge folgenden Code in den Customizer unter „Zusätzliches CSS/JS“ ein oder verwende ein Plugin wie „Simple Custom CSS and JS“: ```html <style> .drehbild { transition: transform 0.3s; cursor: pointer; } .drehbild.gespiegelt { transform: scaleX(-1); /* Horizontal spiegeln */ } </style> <script> document.addEventListener('DOMContentLoaded', function() { var bild = document.querySelector('.drehbild'); if(bild) { bild.addEventListener('click', function() { bild.classList.toggle('gespiegelt'); }); } }); </script> ``` **3. Funktionsweise** - Das Bild erhält beim Klick die Klasse `gespiegelt`. - Mit CSS wird das Bild dann horizontal gespiegelt. - Ein erneuter Klick entfernt die Spiegelung wieder. **Hinweise:** - Für vertikales Spiegeln ändere `scaleX(-1)` zu `scaleY(-1)`. - Wenn du mehrere Bilder so umdrehen möchtest, passe das Skript entsprechend an (z.B. mit `querySelectorAll` und einer Schleife). **Weitere Infos:** - [WordPress Customizer](https://wordpress.org/support/article/appearance-customize-screen/) - [Simple Custom CSS and JS Plugin](https://de.wordpress.org/plugins/custom-css-js/) So kannst du das gewünschte Verhalten einfach umsetzen, ohne ein spezielles Plugin installieren zu müssen.

Accepted Answer

Um die Datei `primefaces/locales/primefaces-locales.js` korrekt in dein Projekt einzubinden, gehe wie folgt vor: 1. **Datei bereitstellen:** Stelle sicher, dass die Datei `primefaces-locales.js`... [mehr]

Accepted Answer

Um die Datei `primefaces/locales/primefaces-locales.js` korrekt in dein Projekt einzubinden, gehe wie folgt vor: 1. **Datei bereitstellen:** Stelle sicher, dass die Datei `primefaces-locales.js` in deinem Projekt vorhanden ist. Sie ist Teil der [PrimeFaces](https://www.primefaces.org/) Ressourcen und kann z.B. aus dem offiziellen [PrimeFaces GitHub-Repository](https://github.com/primefaces/primefaces) oder aus dem PrimeFaces-Download entnommen werden. 2. **Einbindung in JSF-Seite:** Binde die Datei in deiner JSF-Seite (z.B. `xhtml`) ein. Das geschieht am besten mit dem `<h:outputScript>`-Tag, damit JSF die Ressource korrekt verwaltet. Beispiel: ```xml <h:outputScript name="locales/primefaces-locales.js" library="primefaces" target="head"/> ``` - `name`: Pfad zur Datei innerhalb der PrimeFaces-Resourcenstruktur. - `library`: Name der Ressourcenbibliothek, in diesem Fall `"primefaces"`. - `target`: Optional, z.B. `"head"`, um das Script im `<head>`-Bereich einzubinden. 3. **Reihenfolge beachten:** Die Datei sollte **nach** der Haupt-JavaScript-Datei von PrimeFaces eingebunden werden, damit die Lokalisierungen korrekt überschrieben werden. 4. **Verwendung:** Nach der Einbindung stehen dir die Lokalisierungen zur Verfügung. Du kannst dann z.B. in deinen Komponenten die gewünschte Sprache einstellen. **Beispiel für eine vollständige Einbindung:** ```xml <h:outputScript name="primefaces.js" library="primefaces"/> <h:outputScript name="locales/primefaces-locales.js" library="primefaces"/> ``` **Hinweis:** Falls du die Datei an einem anderen Ort ablegst (z.B. im eigenen Ressourcenordner), passe den `library`- und `name`-Parameter entsprechend an. **Weitere Infos:** - [PrimeFaces Dokumentation](https://primefaces.org/documentation/) - [PrimeFaces GitHub](https://github.com/primefaces/primefaces) So stellst du sicher, dass die Lokalisierungen von PrimeFaces korrekt geladen werden.

Accepted Answer

Um deinen Footer mit Bootstrap wie gewünscht zu gestalten, kannst du folgenden Ansatz nutzen: 1. **Footer mit gelbem Hintergrund:** Verwende eine eigene CSS-Klasse oder Bootstrap-Utility-Kl... [mehr]

Accepted Answer

Um deinen Footer mit Bootstrap wie gewünscht zu gestalten, kannst du folgenden Ansatz nutzen: 1. **Footer mit gelbem Hintergrund:** Verwende eine eigene CSS-Klasse oder Bootstrap-Utility-Klassen für die Hintergrundfarbe (`bg-warning` für gelb). 2. **SVGs absolut am unteren Rand:** Setze den Footer auf `position: relative;` und die SVGs auf `position: absolute; bottom: 0;`. So bleiben die SVGs immer am unteren Rand des Footers. 3. **SVGs nebeneinander:** Nutze ein flexibles Layout (z.B. `d-flex` von Bootstrap) oder positioniere die SVGs mit CSS nebeneinander. **Beispiel-HTML:** ```html <footer class="footer bg-warning position-relative" style="height: 200px;">  <div class="footer-svgs position-absolute w-100 d-flex justify-content-between" style="bottom: 0; left: 0;"> <img src="dein-svg1.svg" alt="SVG 1" style="height: 40px;"> <img src="dein-svg2.svg" alt="SVG 2" style="height: 40px;"> <img src="dein-svg3.svg" alt="SVG 3" style="height: 40px;"> <img src="dein-svg4.svg" alt="SVG 4" style="height: 40px;"> </div> </footer> ``` **Hinweise:** - Passe die `height` des Footers und der SVGs nach Bedarf an. - Die Klasse `position-relative` am Footer ist wichtig, damit die absolut positionierten SVGs sich auf den Footer beziehen. - Mit `d-flex justify-content-between` werden die SVGs gleichmäßig verteilt. **Weitere Infos zu Bootstrap:** [https://getbootstrap.com/docs/5.3/utilities/position/](https://getbootstrap.com/docs/5.3/utilities/position/) [https://getbootstrap.com/docs/5.3/utilities/background/](https://getbootstrap.com/docs/5.3/utilities/background/)

Accepted Answer

Um zu verhindern, dass mehrere Collapse-Elemente gleichzeitig geöffnet werden, kannst du die `data-parent`-Attribute in Bootstrap 5 verwenden. Dadurch wird sichergestellt, dass nur ein Collapse-E... [mehr]

Accepted Answer

Um zu verhindern, dass mehrere Collapse-Elemente gleichzeitig geöffnet werden, kannst du die `data-parent`-Attribute in Bootstrap 5 verwenden. Dadurch wird sichergestellt, dass nur ein Collapse-Element innerhalb eines bestimmten Containers gleichzeitig geöffnet sein kann. Hier ist ein einfaches Beispiel, wie du das umsetzen kannst: ```html <!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet"> <title>Collapse Beispiel</title> </head> <body> <div class="accordion" id="accordionExample"> <div class="accordion-item"> <h2 class="accordion-header" id="headingOne"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Erster Abschnitt </button> </h2> <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample"> <div class="accordion-body"> Inhalt des ersten Abschnitts. </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header" id="headingTwo"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Zweiter Abschnitt </button> </h2> <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample"> <div class="accordion-body"> Inhalt des zweiten Abschnitts. </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header" id="headingThree"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Dritter Abschnitt </button> </h2> <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample"> <div class="accordion-body"> Inhalt des dritten Abschnitts. </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/js/bootstrap.min.js"></script> </body> </html> ``` In diesem Beispiel wird die `accordion`-Klasse verwendet, um die Collapse-Elemente zu gruppieren. Das `data-bs-parent`-Attribut sorgt dafür, dass nur ein Element gleichzeitig geöffnet sein kann. Wenn du auf einen neuen Abschnitt klickst, wird der vorherige automatisch geschlossen.

Accepted Answer

Um ein `div` in Drupal 10 mit reinem JavaScript (ohne jQuery) beim Scrollen zu fixieren, wenn es 100 Pixel von oben entfernt ist, kannst du folgenden Ansatz verwenden: 1. Füge deinem Theme eine... [mehr]

Accepted Answer

Um ein `div` in Drupal 10 mit reinem JavaScript (ohne jQuery) beim Scrollen zu fixieren, wenn es 100 Pixel von oben entfernt ist, kannst du folgenden Ansatz verwenden: 1. Füge deinem Theme eine JavaScript-Datei hinzu, falls noch nicht geschehen. 2. In dieser Datei kannst du den folgenden Code verwenden: ```javascript document.addEventListener('DOMContentLoaded', function() { const targetDiv = document.getElementById('dein-div-id'); // Ersetze 'dein-div-id' mit der ID deines Divs const originalOffset = targetDiv.offsetTop; // Ursprüngliche Position des Divs window.addEventListener('scroll', function() { if (window.scrollY > originalOffset - 100) { targetDiv.style.position = 'fixed'; targetDiv.style.top = '0'; } else { targetDiv.style.position = 'relative'; targetDiv.style.top = ''; } }); }); ``` 3. Stelle sicher, dass du die ID des `div`-Elements korrekt angibst. 4. Füge die JavaScript-Datei in dein Drupal-Theme ein, indem du sie in der `.info.yml`-Datei deines Themes registrierst. Dieser Code überwacht das Scrollen der Seite und ändert die Position des `div`, wenn es 100 Pixel von der Oberkante des Viewports entfernt ist.