Ankündigung

Einklappen
Keine Ankündigung bisher.

Quellcode nach bestimmten Element absuchen

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Quellcode nach bestimmten Element absuchen

    Hallo, bin leider in meiner Suche bisher nicht fündig geworden.

    Kann man im Quellcode einer Website (Rechtsklick >> Untersuchen) Elemente mit bestimmten CSS auslesen?

    Zum Beispiel suche ich ein Element (oder alle Elemente), dass die Eigenschaft:
    HTML-Code:
    font-family:'Roboto';
    hat.

    Und ich kann mich jetzt durch jedes einzelne Element klicken, aber es wäre ja schöner, wenn man alle betreffenden Elemente irgendwie anzeigen (oder aufleuchten) lassen könnte.

    Geht das?

  • #2
    Kann man machen... mir erschließt sich der Sinn nicht, da man das über die DevTools vom Browser machen kann (F12 oder Rechtsklick, Element untersuchen - dann im Inspektor einfach die Stile filtern nach Roboto), aber wenn es dir hilft: Man muss alle Elemente rekursiv nach einem bestimmten Property durchsuchen und dabei getComputedStyle verwenden, statt `node.style`...

    PHP-Code:
    <script>
    var 
    rootElement document.querySelector('html');

    function 
    traverse(nodes) {
      for(var 
    i=0;i<nodes.length;i++) {
        var 
    node nodes[i];
        var 
    propertyToCheck getComputedStyle(node).fontFamily;
        var 
    searchFor "Roboto";
        if(
    propertyToCheck.indexOf(searchFor) !== -1) {
          
    node.style.border '2px dashed red';
            
    console.log(node.tagNamepropertyToCheck);    
        }
        
    traverse(node.children);
      }
    }

    traverse(rootElement.children);
    </script> 
    Tutorials zum Thema Technik:
    https://pilabor.com
    https://www.fynder.de

    Kommentar


    • #3
      Zitat von Andreas Beitrag anzeigen
      Kann man machen... mir erschließt sich der Sinn nicht, da man das über die DevTools vom Browser machen kann (F12 oder Rechtsklick, Element untersuchen - dann im Inspektor einfach die Stile filtern nach Roboto),
      Genau das meine ich ja, wusste bloß nicht, wie das Browsertool heißt. Wenn ich dort auf "Elemente" gehe und dann auf "Filtern" dann kann ich ja nur das ausgewählte Element untersuchen. Ich hatte mich gefragt, ob man mit dem Browsertool nicht vllt. auch das ganze Dom durchsuchen kann, damit man direkt die Stelle ,,aufleuchten" sieht, die man sucht.

      Kommentar


      • #4
        Ob das mit dem markieren geht, weiß ich gerade nicht.
        Doch in Beitrag 2# wurde dir ein Code gepostet, den du in der Konsole nutzen kannst.

        Browser Tools öffnen.
        Dann auf Konsole klicken.
        Dann kopierst du den Code aus 2# (ohne Script Tags)
        HTML-Code:
        var rootElement = document.querySelector('html');
        
        function traverse(nodes) {
          for(var i=0;i<nodes.length;i++) {
            var node = nodes[i];
            var propertyToCheck = getComputedStyle(node).fontFamily;
            var searchFor = "Roboto";
            if(propertyToCheck.indexOf(searchFor) !== -1) {
              node.style.border = '2px dashed red';
                console.log(node.tagName, propertyToCheck);    
            }
            traverse(node.children);
          }
        }
        
        traverse(rootElement.children);
        da rein und klickst Enter.
        Dann sollten alle sichtbaren Elemente mit fontFamily;Roboto einen Roten Border haben
        Ich mach keine Rechtschreibfehler - ich schreib Freestyle!
        Erreichbar in mein Javascript-Forum und in Facebook-Chat

        Kommentar


        • #5
          Dankeschön erstmal von beiden für den Hilfsversuch. Markieren klappt leider nicht. Und der Code funktioniert auch nicht. Ob ich da Arial, Roboto oder sonstwas eingebe, es wird jedes Element mit einer Border markiert.

          Kommentar


          • #6
            Habe es gerade mit dem Code nochmal auf anderen Seiten probiert. Da klappt es. Wahrscheinlich klappt es nicht bei Seiten bei denen komplette Schriftbibliotheken vorgeladen werden. Und das Script kann auch leider nicht unterscheiden zwischen "Roboto" und "Roboto condensed" zum Beispiel.

            Kommentar


            • #7
              Zitat von Anormal Beitrag anzeigen
              Und das Script kann auch leider nicht unterscheiden zwischen "Roboto" und "Roboto condensed" zum Beispiel.
              Da darfst du schon selbst noch etwas rumbasteln, du könntest fontFamily noch zerlegen und abfragen ob der ganze Schritfname vorkommt.

              Außerdem: im Code aus #2 hätte ich nicht for sondern forEach verwendet und nicht indexOf sondern includes().

              Kommentar


              • #8
                ich hätte es in als Einzeiler formuliert

                Code:
                [...document.querySelectorAll('html *')]
                  .filter ( el => getComputedStyle(el).fontFamily.includes('courier'))
                  .forEach(el=>el.style.border='2px dashed red')

                Kommentar


                • #9
                  Nach langmonatiger Recherche und unzähligen Versuchen, habe ich noch eine Lösung gefunden, falls es noch jemanden interessiert:

                  HTML-Code:
                  [...document.querySelectorAll('html *')]
                    .filter ( el => getComputedStyle(el).fontFamily.includes('Roboto') 
                  && !getComputedStyle(el).fontFamily.includes('Roboto Condensed'))
                    .forEach(el=>el.style.border='2px dashed red')
                  So kann das Script endlich nur noch Ergebnisse für Roboto umranden, weil es alle anderen Ergebnisse mit Roboto Condensed ausschließt. Andersherum habe ich noch keine Lösung gefunden, aber brauche ich für mein Vorhaben auch bisher nicht.

                  Kommentar


                  • #10
                    Bei Schriften wie Arial mit diversen Ausprägungen wird´s mühsam...
                    Dann lieber wie folgt:
                    HTML-Code:
                    function checkFont (fontName, prop, value ){
                      document.querySelectorAll('*')
                        .forEach(el => getComputedStyle(el).fontFamily.split(',')
                          .forEach( font => {
                            if (font.trim().replaceAll('"', "") == fontName)
                              el.style[prop]=value
                          }))
                    }
                    checkFont('Arial', 'background', 'silver')

                    Kommentar


                    • #11
                      Vielleicht:
                      Code:
                      Array.from(document.styleSheets).forEach(function(stylesheet) {
                           Array.from(stylesheet.cssRules).forEach(function(rule) {
                               if(!(rule instanceof CSSStyleRule)) {
                                   return;
                               }
                               if(!rule.style.fontFamily.includes("Lato")) {
                                   return;
                               }
                               rule.style.outline = 'solid 4px #f00';
                               console.debug(
                                   "%s verwendet %s im Selector %s",
                                   stylesheet.href,
                                   rule.style.fontFamily,
                                   rule.selectorText
                               );
                           });
                      });

                      Kommentar

                      Lädt...
                      X