CSS Eigenschaft mit Javascript ändern

TK Gast 03.05.2022 14:40 #7053383

Lesenswert?

•

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

Angehängte Dateien:

bsp_css_js.txt (785 Bytes)

Antwort Zitieren Bearbeiten Thread verschieben Thread sperren Anmeldepflicht aktivieren Anpinnen Thread löschen Thread mit anderem zusammenführen Beitrag melden

Εrnst B. (ernst) 03.05.2022 14:45 #7053391

Lesenswert?

•

▲
▼

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.

Antwort Zitieren Bearbeiten Löschen Beitrag melden

Irgend W. (irgendwer) (Firma: egal) 03.05.2022 14:53 #7053404

Lesenswert?

•

▲
▼

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.

Antwort Zitieren Bearbeiten Löschen Beitrag melden

Oliver R. Gast 03.05.2022 15:01 #7053414

Lesenswert?

•

▲
▼

Das ist eigentlich das klassische Anwendungsbeispiel für jQuery:

https://www.w3schools.com/jquery/jquery_examples.asp

Antwort Zitieren Bearbeiten Löschen Beitrag melden

TK Gast 03.05.2022 15:04 #7053421

Lesenswert?

•

▲
▼

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

Antwort Zitieren Bearbeiten Löschen Beitrag melden

TK Gast 03.05.2022 15:11 #7053431

Lesenswert?

•

▲
▼

@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

Antwort Zitieren Bearbeiten Löschen Beitrag melden

Εrnst B. (ernst) 03.05.2022 15:15 #7053435

Lesenswert?

•

▲
▼

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)

Antwort Zitieren Bearbeiten Löschen Beitrag melden

🐧 DPA 🐧 Gast 03.05.2022 15:20 #7053445

Lesenswert?

•

▲
▼

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:

.fancystate div hr {
  width: 123px;
// js: auf <html> die klasse setzen
document.documentElement.classList.add("fancystate");
document.documentElement.classList.remove("fancystate");


Oder eventuell wären auch CSS Custom Properties was:

  --bla-hr-width: initial;
  width: var(--bla-hr-width);
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:

for(let hr of document.querySelectorAll('div > hr')){
  hr.style.width = '123px';


Und ja, vergiss jQuery, das macht heute nur noch Probleme.

Antwort Zitieren Bearbeiten Löschen Beitrag melden

Εrnst B. (ernst) 03.05.2022 15:22 #7053453

Lesenswert?

•

▲
▼

Beispiel für das Forum hier (JS-Konsole oder bookmarklet):

document.querySelectorAll("div.post-userid- div.subject").forEach(d=>d.style.backgroundColor="green")


und schon sind die Gast-Beiträge schick hervorgehoben :)

Antwort Zitieren Bearbeiten Löschen Beitrag melden

TK Gast 03.05.2022 15:24 #7053455

Lesenswert?

•

▲
▼

@Ernst und @DPA:
Das werde ich jeweils mal probieren

Danke euch beiden

Gruß
TK

Antwort Zitieren Bearbeiten Löschen Beitrag melden

🐧 DPA 🐧 Gast 03.05.2022 15:35 #7053468

Lesenswert?

•

▲
▼

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.

Antwort Zitieren Bearbeiten Löschen Beitrag melden

TK Gast 03.05.2022 16:19 #7053525

Lesenswert?

•

▲
▼

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

Antwort Zitieren Bearbeiten Löschen Beitrag melden

Εrnst B. (ernst) 03.05.2022 16:30 #7053530

Lesenswert?

•

▲
▼

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

Antwort Zitieren Bearbeiten Löschen Beitrag melden

CSS Eigenschaft mit Javascript ändern

Antwort schreiben