查找所有宽度大于xxx的元素并将它们输出到控制台。

Question

我在Joomla!中设计网页时遇到了一个问题，即有一个看不见的元素导致页面水平滚动。

我对js和jQuery完全没有经验，所以有谁能帮我编写一个脚本，在控制台输出所有宽度大于特定值或大于浏览器窗口的元素？或者以其他方式找到导致浏览器水平滚动的元素？

我更喜欢一行代码的控制台脚本，但也可以使用.js文件。

- Gatos

Answer 1

我建议您查看浏览器的开发者控制台。例如，Firefox可以向您显示一个漂亮的3D视图！

如果您真的想在JavaScript中枚举所有宽度大于x的元素，请使用以下代码：

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

如果您想要与body元素的可见宽度进行比较，请使用document.body.clientWidth来获取x。

- ComFreek

---

感谢您的及时回复。不幸的是，由于复杂的模板导致页面有很多元素，使用Firebug查看它们并不是非常有效的。如果我将您的脚本粘贴到控制台中，我会得到“TypeError：Cannot call method 'each' of null”的错误。我想我必须将其放入JS文件中，并从页面调用它以正确运行它？ - Gatos

你有包含jQuery吗？ - tomca32

啊，我不得不用jQuery替换$（因为Joomla！的原因），但现在它可以运行了。谢谢！ - Gatos

是的，据我所知，Joomla使用MooTools，如果不使用jQuery = $.noConflict()或类似方法，就会与jQuery冲突。 - ComFreek

嗯，看起来脚本给我返回了每个元素...总共263个 :P 如果我在这个页面上运行它，它会给我返回851个元素... - Gatos

Answer 2

要获取窗口宽度，只需使用以下代码：

$(window).width()

所以，以ComFreek的示例为例，要循环遍历比您的窗口宽的元素，您需要像这样编写：

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

- tomca32

Answer 3

使用以下JS代码在浏览器控制台中查找宽度大于窗口宽度的元素：

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

如果还是有困难，可以使用一些极端的CSS：

body {
  overflow-x: hidden;
}

- rapttor

Answer 4

对我有帮助的是跑步。

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

在控制台上，这帮助我识别出导致文档宽度超过窗口宽度的元素。在我的情况下，我们有一些从文档外部移动进来的元素（很棒的网站）。话虽如此，并没有一个单独的元素比窗口宽度更宽。它们只是被定位在普通边界之外。

由于我已经使用了 <meta name="viewport" content="width=device-width, initial-scale=1.0">，因此我最终添加了以下CSS：

body {
  overflow-x: hidden;
}

- Lars Blumberg

Answer 5

我使用了以下代码：

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

通过访问变量outOfScreen，我可以检查整个集合。

- godblessstrawberry

Answer 6

你不需要脚本。用Chrome打开页面，按F12，在元素选项卡中选择每个元素，就可以看到页面上的每个元素以其他颜色和宽度显示。

- baltov