Finde alle Elemente mit einer Breite größer als xxx und gebe sie an die Konsole aus

Question

Ich entwerfe eine Webseite in Joomla! und ich stoße auf ein Problem, bei dem ich ein Element habe, das ich nicht sehen kann und das dazu führt, dass die Seite horizontal scrollt.

Ich bin völlig nutzlos mit js und jQuery so kann mir jemand mit einem Skript helfen, das ausgegeben wird, um alle Elemente zu trösten, die eine Breite größer als ein bestimmter Wert oder größer als das Browserfenster haben? Oder kann man auf andere Weise feststellen, welches Element den Browser horizontal scrollen lässt?

Ich würde ein One-Line-Konsole-Skript bevorzugen, aber eine .js-Datei wird auch tun.

Answer 1

Ich empfehle Ihnen, einen Blick in die Entwicklerkonsole Ihres Browsers zu werfen. Zum Beispiel kann Firefox Ihnen eine schöne 3D-Ansicht anzeigen!

Wenn Sie wirklich alle Elemente, deren Breite aufzählen wollen, sind größer als x in JavaScript, verwenden:

$("*").each(function() { 
    if ($(this).width() > 100) { 
     console.log(this.tagName + "#" + this.id); 
    } 
}); 

Verwenden document.body.clientWidth für x, wenn Sie gegen den Körper des sichtbaren Breite vergleichen möchten.

Answer 2

einfach Fensterbreite erhalten verwenden:

$(window).width() 

So ComFreek ist beispielsweise eine Schleife durch Elemente breiter als die Fensterbreite zu verwenden Sie ist so schreiben würde:

$("*").each(function() { 
    if ($(this).width() > $(window).width()) { 
     console.log(this.tagName + "#" + this.id); 
    } 
}); 

Answer 3

Sie nicht brauchen ein Skript. Öffnen Sie die Seite mit Chrome, drücken Sie F12, und wählen Sie auf der Elemente-Registerkarte jedes Element aus, und Sie können jedes Element auf einer Seite mit einer anderen Farbe und Breite sehen.

Answer 4

I verwendet

var outOfScreen = $('*').filter(function(){if($(this).width()>$(window).width())return true})

so dann konnte ich durch den Zugriff auf die outOfScreen var die ganze Sammlung inspizieren.

Answer 5

Was für mich geholfen lief

$("body *").each(function() { 
    $(this).css('background-color', 'red'); 
}); 

auf der Konsole. Dies half mir, Elemente zu identifizieren, die dazu führten, dass die Dokumentbreite über die Fensterbreite hinaus wuchs. In meinem Fall hatten wir Elemente von außerhalb des Dokuments (hallo fancy Websites). Das heißt, es gab kein einziges Element, das breiter als die Fensterbreite war. Dort wurde einfach außerhalb der gewöhnlichen Grenzen positioniert. Vielen Dank für Ihre schnelle Antwort

body { 
    overflow-x: hidden; 
}