[FRAGE] per Javascript alle versteckten Elemente suchen

[Calvinstefan]

Hallo Leute!

Würdet ihr mir bitte bei der Erstellung einer Abfrage / Verarbeitung helfen?
Folgendes gleich vorab: jQuery, mit dem meine Anforderung einfachst umzusetzen wäre, darf ich nicht benutzen! :icon8:

Ich muss auf meiner Homepage beim Klick auf einen Button bei all denjenigen Elementen das Attribut "verify" entfernen, welche derzeit auf der Homepage nicht sichtbar sind.

Ich hatte im Netz eine Lösung gefunden, wenn das Attribut bei allen Elementen, welche es haben, entfernt werden soll:

Array.from(document.querySelectorAll("*[verify]")).forEach(e => e.removeAttribute('verify'));

Funktioniert super!

Mein Problem ist jetzt der SELECTOR-Teil. In diesem muss abgefragt werden, ob ein Element sichtbar ist.

Um die Sichbarkeit zu ermitteln habe ich auch schon etwas gefunden:

element.offsetWidth = 0 && element.offsetHeight = 0;

Ein "display == 'none'" reicht nicht aus, deshalb würde ich gerne diese Prüfung auf das width und height nutzen.
jQuery scheint bei :hidden ebenfalls auf diese Art und Weise zu arbeiten.

Könntet ihr mir bitte sagen, wie ich diese Prüfung auf width und height in den Elementenselektor des querySelectorAll bekomme?

Daaaanke!


Gruß,
Stefan

 

[mikdoe]

Könntet ihr mir bitte sagen, wie ich diese Prüfung auf width und height in den Elementenselektor des querySelectorAll bekomme?

Warum muss das in den Selektor rein formuliert werden? Warum darfst du auf deiner eigenen HP kein jQuery nutzen? Das kann der Hoster doch gar nicht feststellen!? Wenn das schon nicht geht, was ist dann noch alles eingeschränkt? Erkläre bitte mal genau was da Sache ist damit es eine passende Lösung gibt.

 

[daniel220786]

Mein Problem ist jetzt der SELECTOR-Teil. In diesem muss abgefragt werden, ob ein Element sichtbar ist.

Um die Sichbarkeit zu ermitteln habe ich auch schon etwas gefunden:

Was meinst du mit Sichtbar ?
Nur das was du auf den Bildschirm siehst und nicht irgendwo weit unten auf der Page ?

Wenn ja.
Ich hatte schon mal ein Thema gehabt wo man das auch auslesen musste.Da ging es um den Footer ob der im Sichtbaren Bereich ist, gar nicht zu sehen , oder ganz zusehen.
In mein Beispiel siehst du an den TOP Button was gerade davon ist.

Das könntest du Theoretisch so auch bei dir nutzen wenn ich dich richtig verstanden habe.
**Link entfernt, weil Seite nicht mehr erreichbar **


Lass dich nicht wegen de Jquery einbindung täuschen, das wird hier nicht gebraucht

 

[Calvinstefan]

Hallo!
Also wegen mir muss der Codeteil der Prüfung auf width und height nicht mit in den Elementenselektorteil des querySelectorAll. Ich hatte gehofft, dass man sich so eine zusätzliche Schleife über das Elementearray sparen könnte.
Und kein jQuery ist bei dem "Projekt" vorgegeben. Alle Argumente meinerseits, es doch zuzulassen, wurden abgebügelt.

Mit "Sichtbar" meinte ich alle Elemente der "Homepage" welche width = 0 und height = 0 sind. Dabei kann es sich auch um Elemente handeln, die derzeit außerhalb des sichtbaren Browserfensters liegen.

Also ... gibt es eine Möglichkeit mit wenig Code
a. alle Elemente zu selektieren, welche width = 0 und height = 0 sind und
b. an diesen dann das Attribut "verify" zu entfernen?

Danke Euch!

Gruß,
Stefan.

 

[daniel220786]

Mein Code hatte kein Jquery gebraucht, man hätte die einbindung einfach löschen können.
Ist aber auch egal , weil ich es falsch verstanden habe.

Ich würde das dann so machen

var alles=document.querySelectorAll('*[verify]');
alles.forEach(function(e){
    let wi_kleiner=false;
    let hi_kleiner=false;
    let wi=e.getBoundingClientRect().width.toFixed(0);
    let hig=e.getBoundingClientRect().height.toFixed(0)
    if(wi<=0){
        wi_kleiner=true;
    }else{
        console.log('Breiter als 0 und zwar '+wi)
    }
    if(hig<=0){
        hi_kleiner=true;
    }else{
        console.log('Höher als 0 und zwar '+hig)
    }
    if(hi_kleiner==true && wi_kleiner==true){
        e.removeAttribute('verify');
        console.log('Höhe und breite gleich 0 ,Attributte gelöscht')
    }
})

Ist jetzt etwas ausführlicher.
Man könnte aber noch etwas Code löschen wenn es dir zu lang ist.
Ich hoffe das ich dir jetzt helfen konnte und es richtig verstanden habe

- - - Aktualisiert - - -

Und ob ein Element wirklich display:none ist , ob Inline style oder über die CSS gesetzt.
Würde ich das so abfragen

var alles=document.querySelectorAll('*[verify]');
alles.forEach(function(e){
  wi=window.getComputedStyle(e).display;
    if(wi=='none'){
        e.removeAttribute('verify');
        console.log('Display ist none ,Attributte gelöscht')
    }
})