nicht angemeldet
document.querySelector('#div_karte, #div_karte_pfeil')
Linuchs
document.querySelector('#div_karte, #div_karte_pfeil')
Linuchs
Gunnar BittersmannMoin,
wenn JS aktiv, wird display:none aufgehoben:
document.querySelector('#div_karte').style.display='inherit';
document.querySelector('#div_karte_pfeil').style.display='inherit';
mehrere Versuche einer Kurzform scheiterten, u.a.
document.querySelector('#div_karte, #div_karte_pfeil').style.display='inherit';
// oder
document.querySelectorAll('#div_karte, #div_karte_pfeil').style.display='inherit';
...
mozilla.org deutet an, es gäbe so etwas:
const el = document.querySelector("#main, #basic, #exclamation");
Aber dann müssen wohl die el Elemente einzeln aufgerufen werden?
Gibt es eine Kurzform?
fragt Linuchs
-
Hallo Linuchs,
wenn JS aktiv, wird
display:noneaufgehoben:document.querySelector('#div_karte').style.display='inherit'; document.querySelector('#div_karte_pfeil').style.display='inherit';mehrere Versuche einer Kurzform scheiterten, u.a.
document.querySelector('#div_karte, #div_karte_pfeil').style.display='inherit'; // oder document.querySelectorAll('#div_karte, #div_karte_pfeil').style.display='inherit'; ...Aber dann müssen wohl die el Elemente einzeln aufgerufen werden?Aus dem Wiki:
Die Methode querySelector() der ParentNode-Schnittstelle gibt das erste Element zurück, auf das der übergebene Selektor passt.
→ Also ändert deine erste Zeile nur das erste Element!
Die Methode querySelectorAll() der ParentNode-Schnittstelle gibt diejenigen Elemente zurück, auf die der übergebene Selektor passt. [...] Das Ergebnis des Methodenaufrufs ist ein statisches NodeList-Objekt mit den gefundenden Elementen.
→ Also musst du über diese Nodelist iterieren anstatt die Liste selbst (un)sichtbar zu machen.
Bis bald! Jonathan
--
"Ich habe heute ein Elan-Problem und mein Tatenvolumen ist fast aufgebraucht!"-
@@Jonathan Harker
→ Also musst du über diese Nodelist iterieren anstatt die Liste selbst (un)sichtbar zu machen.
Letzteres dürfte auch kaum möglich sein. Oder hat ein
NodeList-Objekt einestyle-Eigenschaft?🖖 Живіть довго і процвітайте
--
When the power of love overcomes the love of power the world will know peace.
— Jimi Hendrix
-
-
document.querySelectorAllgibt eine Liste zurück. Auf deren Elemente lässt sich mit forEach eine (anonyme) Funktion anwenden.Schnelles, funktionierendes Beispiel zum nicht SO nachmachen: Die eigentlich verborgenen Items werden angezeigt. Beachte den Hinweis unten!
<html> <head> <title>Test</title> <style> #foo, #bar, #baz { display:none; } </style> </head> <body> <h1>Test</h1> <p id="foo">FOO</p> <p id="bar">BAR</p> <p id="baz">BAZ</p> <script> document.querySelectorAll( "#foo, #bar, #baz" ).forEach( function ( item ) { item.style.display='block'; } ); </script> </body> </html>Hinweis: Üblicherweise ändert man die Klasse(n), nicht die CSS-Eigenschaft direkt. Dafür gibt sehr viele gute Gründe.
-
@@Raketenwilli
Hinweis: Üblicherweise ändert man die Klasse(n)
bzw. andere Attribute
nicht die CSS-Eigenschaft direkt. Dafür gibt sehr viele gute Gründe.
Fürs Nichtanzeigen/Anzeigen ändert man keine Klasse, sondern das
hidden-Attribut. Dafür gibt sehr viele gute Gründe.🖖 Живіть довго і процвітайте
--
When the power of love overcomes the love of power the world will know peace.
— Jimi Hendrix -
@@Raketenwilli
document.querySelectorAllgibt eine Liste zurück. Auf deren Elemente lässt sich mit forEach eine (anonyme) Funktion anwenden.Oder man geht die Liste mit einer for-of-Schleife durch:
for (let element of document.querySelectorAll(…) { element.hidden = false; }🖖 Живіть довго і процвітайте
--
When the power of love overcomes the love of power the world will know peace.
— Jimi Hendrix -
document.getElementsByClassName('classname')liefert eine "collection". Die lässt sich mitArray.from(collection)in einen Array umwandeln, dessen Elementen man sodann z.B. in einer forEach-Schleife die Klasse entzieht:<html> <head> <title>Test</title> <style> .showOnActiveJs { display: none; } </style> </head> <body> <h1>Test</h1> <p class="showOnActiveJs" id="foo">FOO</p> <p class="showOnActiveJs" id="bar">BAR</p> <p class="showOnActiveJs" id="baz">BAZ</p> <script> Array.from( document.getElementsByClassName( 'showOnActiveJs' ) ).forEach( function( item ) { item.classList.remove( 'showOnActiveJs' ); } ); </script> </body> </html>-
@@Raketenwilli
Nö. Eher so:
<html> <head> <title>Test</title> </head> <body> <h1>Test</h1> <p class="showOnActiveJs" id="foo" hidden="">FOO</p> <p class="showOnActiveJs" id="bar" hidden="">BAR</p> <p class="showOnActiveJs" id="baz" hidden="">BAZ</p> <script> Array.from( document.getElementsByClassName('showOnActiveJs') ).forEach( function ( item ) { item.hidden = false; } ); </script> </body> </html>document.getElementsByClassName('showOnActiveJs')liefert eineHTMLCollection.document.querySelectorAll('.showOnActiveJs')liefert eineNodeList– da kannst duforEach()drauf anwenden und brauchst dasArray.from()nicht:document.querySelectorAll('.showOnActiveJs').forEach( function ( item ) { item.hidden = false; } );Gern auch mit Pfeilfunktion:
document.querySelectorAll('.showOnActiveJs').forEach( item => { item.hidden = false; });Oder eben mit Schleife:
for (let item of document.querySelectorAll('.showOnActiveJs') { item.hidden = false; }Möglicherweise will man auch auf die Klasse
showOnActiveJsverzichten und die Elemente anhand ihrer ID selektieren:document.querySelectorAll('#foo, #bar, #baz').forEach( item => { item.hidden = false; });bzw.
for (let item of document.querySelectorAll('#foo, #bar, #baz') { item.hidden = false; }🖖 Живіть довго і процвітайте
--
When the power of love overcomes the love of power the world will know peace.
— Jimi Hendrix-
Möglicherweise will man auch auf die Klasse showOnActiveJs verzichten und die Elemente anhand ihrer ID selektieren
Oder anhand eines
data-attributes:<p data-selector="hiddenIfNoneJs" hidden="1">Foo</p> <p data-selector="hiddenIfNoneJs" hidden="1">Bar</p> <p data-selector="hiddenIfNoneJs" hidden="1">Baz</p>document.querySelectorAll( '[data-selector="hiddenIfNoneJs"]' ).forEach( item => { item.hidden = false; });-
@@Raketenwilli
Oder anhand eines
data-attributes:Ginge auch. Aber ich halte das schon für eine Klassifizierung der Elemente;
classalso für angebracht.Außerdem könnte ich mir vorstellen, dass die Selektorengine in Browsern für Klassen optimiert ist, also ein My schneller ist als bei Attributselektoren. (Deshalb schreib ich desöfteren „aus CSS-Sicht“.)
🖖 Живіть довго і процвітайте
--
When the power of love overcomes the love of power the world will know peace.
— Jimi Hendrix-
Ginge auch.
Klar. Hatte ich ja auch getestet.
Aber ich halte das schon für eine Klassifizierung der Elemente; class also für angebracht.
Das war auch meine Intention dafür, die „Alternative via Klasse“ zu bringen. Ich wollte sodann nur Deine Iterationen vervollständigen…
So. Jetzt ist Zeit für den Grill.
-
-
-
-
-