Find all elements with width larger than xxx and output them to console

I suggest you to have a look in your browser's developer console. For example, Firefox can display you a nice 3D view!

If you really want to enumerate all elements whose width are greater than x in JavaScript, use this:

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

Use document.body.clientWidth for x if you want to compare against the body's visible width.


To get window width simply use:

$(window).width()

So to use ComFreek's example, to loop through elements wider than your window width you would write is like this:

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

JS Code to find elements larger than window width, use in browser console:

var maxWidth = document.documentElement.offsetWidth;
[].forEach.call(
  document.querySelectorAll('*'),
  function(el) {
    if (el.offsetWidth > maxWidth) {
      console.log(el);
    }
  }
);

if still this give you haddache, use a bit of extreme css:

body {
  overflow-x: hidden;
}

Tags:

Html

Css

Jquery