Hallo zusammen, ich suche nach der Lösung für ein bestimmtes Problem mit CSS und Javascript. Ich möchte abh. von diversen (HIER IRELEVANTEN) User-Vorgaben eine bzw. mehrere CSS-Eigenschaft(en) mittels Javascript ändern und komme aktuell nicht drauf, wie es gehen könnte. Im Anhang mal ein AUSZUG aus meinen einzelnen Dateien. Was ich suche, ist die Javascript Methode zur Anpassung des <hr> Tags, hier speziell die Eigenschaft "width" und das auch nur innerhalb der "submain" div. Ich möchte nicht jedem hr-Tag eine ID geben! Das muss doch auch anders gehen? Beispielhaft habe ich die Änderung von "width" der "submain" div mal im Javascript dargestellt. Das geht ja wegen der vergebenen ID. Die HTML-Datei(en) möchte ich nicht ändern. Kann mir jemand helfen? Gruß TK
TK schrieb: > Die HTML-Datei(en) möchte ich nicht ändern. Tja, damit gings am schönsten.... neue Klasse "submain_breit" erstellen, darin die width: 420px; unterbringen, im JS-Code statt document.getElementById("submain").style.width="420px"; einfach die Klasse setzen. Und schon kannst du auf die HRs unterhalb der breiten Klasse automatisch eine eigene Breite anwenden.
TK schrieb: > Die HTML-Datei(en) möchte ich nicht ändern. Wenn du die .js in einer eigenen Datei drin hast, kommst du aus ohne die .html. Wenn der js Anteil allerdings direkt in der html Antwort eingebunden ist, musst du da natürlich dran. Die Eigenschaften aus der css werden quasi nur einmal am Anfang auf die html-tag angewendet, danach kannst du dann mit js die einzelnen Eigenschaften von jedem html-tag jederzeit überschreiben.
Das ist eigentlich das klassische Anwendungsbeispiel für jQuery: https://www.w3schools.com/jquery/jquery_examples.asp
Hallo Ernst,
die Breite (und später auch noch andere Eigenschaften wie Farbe,
Position usw) soll auch noch dynamisch sein! Dann macht eine eigene
Klasse nicht wirklich Sinn.
Könnte man evtl. mittels getElementsByTagName("hr") speziell auf die
Tags innerhalb der submain zugreifen? Diese Methode gibt ja alle HR-Tags
zurück - und ich kenne dann den/die Indexbereich(e) nicht, zumal es
andere HTML-Dateien mit gleichem Aufbau, jedoch andere Anzahlen von
LI-Elementen gibt. Dann wäre der Indexbereich ebenso dynamisch.
Gruß
TK
@Irgend W. Die speziellen Abfragen für die geänderte Darstellung innerhalb der HTML Datei(en) erfolgen durch die "body onload=..." Aufrufe. In der JS-Funktion soll dann die Änderung der CSS Eigenschaft(en) erfolgen (daher können die HTML Dateien so bleiben, wie sie sind - hoffentlich) @Oliver: mit JQuery hab ich noch nichts gemacht - werd mich mal in einer ruhigen Minute einlesen - Danke Gruß TK
TK schrieb: > mit JQuery hab ich noch nichts gemacht - werd mich mal in einer ruhigen > Minute einlesen - Danke Brauchts auch nicht wirklich. Vieles was Früher™ umständlich war und per jQuery erleichtert wurde, ist inzwischen direkt in die Browser gewandert. TK schrieb: > getElementsByTagName("hr") speziell auf die > Tags innerhalb der submain zugreifen? du suchst document.querySelectorAll(".submain hr") Edit: du hast eine id, also: document.querySelectorAll("#submain hr") (wie im CSS)
:
Bearbeitet durch User
Bei einem style Element gibt es: https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet#methods Das funktioniert auch: style.innerText='';style.appendChild(document.createTextNode(css)); Ist aber meistens eher murks. Wenn es einfach überall sein muss, könnest du sowas machen:
1 | // css |
2 | .fancystate div hr {
|
3 | width: 123px; |
4 | } |
5 | // js: auf <html> die klasse setzen
|
6 | document.documentElement.classList.add("fancystate");
|
7 | document.documentElement.classList.remove("fancystate");
|
Oder eventuell wären auch CSS Custom Properties was:
1 | // CSS |
2 | :root {
|
3 | --bla-hr-width: initial; |
4 | } |
5 | |
6 | div hr {
|
7 | width: var(--bla-hr-width); |
8 | } |
9 | |
10 | // JS |
11 | document.documentElement.style.setProperty('--bla-hr-width', '123px');
|
Wenn es aus irgendwelchen gründen wirklich auf dem hr selbst gesetzt werden muss, musst du halt über alle drüber gehen:
1 | for(let hr of document.querySelectorAll('div > hr')){
|
2 | hr.style.width = '123px'; |
3 | } |
Und ja, vergiss jQuery, das macht heute nur noch Probleme.
Beispiel für das Forum hier (JS-Konsole oder bookmarklet):
1 | document.querySelectorAll("div.post-userid- div.subject").forEach(d=>d.style.backgroundColor="green")
|
und schon sind die Gast-Beiträge schick hervorgehoben :)
@Ernst und @DPA: Das werde ich jeweils mal probieren Danke euch beiden Gruß TK
Noch was. Oft braucht man JS gar nicht, wenn es nur um Darstellungssachen geht. Mit %, calc, var, glex, grid. etc. ist das alles recht flexibel, und mit :hover, :active, :focus und checkboxen, kann man auch ein paar stateful sachen machen. Als Beispiel, was so alles möglich ist, ohne JS: Was man mit css & checkboxen so anstellen kann: https://tic-tac-toe-s.s.abrecht.li/ Berechnen und Zusammensetzen von css Properties mit var & calc bei sehr complexen exacten layouts: https://togn-s.s.abrecht.li/build/togn.xhtml (All die Linien sind per CSS gemacht, das HTML ist rein semantisch) Animierte 3d umgebungen: https://keithclark.co.uk/labs/css-fps/nojs/ Komplexe grid layouts: https://developer.mozilla.org/de/docs/Web/CSS/CSS_Grid_Layout Responsive Layoutänderungen: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design (und in zukunft irgendwann mal https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries) Animierte Übergänge: https://developer.mozilla.org/de/docs/Web/CSS/transition Also bei layout Sachen immer 2mal überlegen, ob es JS wirklich dafür braucht.
So, auf die Schnelle hat das Beispiel für das Forum von Ernst die Lösung gebracht. Damit kann ich die HR-Tags dynamisch anpassen - SUPER! (den document.querySelectorAll kannte ich bisher noch nicht, bin wahrscheinlich bei CSS1.0 hängen geblieben) Gruß TK
TK schrieb: > bin wahrscheinlich bei CSS1.0 hängen geblieben Gibt's schon ca. 10 Jahre, nur der IE6 war damals die Spaßbremse https://caniuse.com/mdn-api_element_queryselectorall
Thread beobachten
Seitenaufteilung abschaltenBitte melde dich an um einen Beitrag zu schreiben. Anmeldung ist kostenlos und dauert nur eine Minute.
Bestehender Account
Schon ein Account bei Google/GoogleMail? Keine Anmeldung erforderlich!
Mit Google-Account einloggen
Mit Google-Account einloggen
Noch kein Account? Hier anmelden.