Jquery 找到宽度大于xxx的所有元素并将其输出到控制台

我正在Joomla设计一个网页！我遇到了一个问题，我看不到一个元素，导致页面水平滚动

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

---

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

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

如果确实要枚举JavaScript中宽度大于x的所有元素，请使用以下命令：

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

---

如果要与正文的可见宽度进行比较，请使用x的

document.body.clientWidth

。

要获得窗口宽度，只需使用：

$(window).width()

因此，以ComFreek为例，循环遍历比您要编写的窗口宽度更宽的元素，如下所示：

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

---

你不需要脚本。用Chrome打开页面，按F12键，然后在“元素”选项卡中选择每个元素，您可以在页面中看到具有其他颜色和宽度的每个元素。

I used

var outOfScreen=$（'*'）.filter（函数（）{if（$（this）.width（）>$（window.width（））返回true}）

---

因此，我可以通过访问

屏幕外的
变量来检查整个集合。
对我有帮助的是运行

$（“body*”）。每个（函数（）{
$（this.css（'background-color'，'red'）；
});

在控制台上。这有助于我识别导致文档宽度超出窗口宽度的元素。在我的例子中，元素从文档外部移入（hello fancy网站）。也就是说，没有一个元素比窗口宽度更宽。它们仅仅位于普通边界之外

由于我已经在使用
，我最终添加了以下CSS：

正文{
溢出x：隐藏；
}
JS要查找大于窗口宽度的元素，请在浏览器控制台中使用：

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

如果这仍然给你haddache，使用一些极端的css：

body {
  overflow-x: hidden;
}

谢谢你的及时回复。不幸的是，由于一个复杂的模板，页面中有如此多的元素，使用firebug遍历这些元素并不是很有效。如果我在控制台中粘贴脚本，我会得到'TypeError:cannotcallmethod'each'of null'。我想我必须把它放在一个js文件中，并从页面调用它才能正常运行？是否包含jQuery？@Gatos如果我在StackOverflow.com上的Chrome开发控制台中插入我的脚本，它会工作得很好。我不知道其他浏览器的行为。把它放在一个JS文件中，并在嵌入jQuery后运行它肯定会起作用。谢谢大家!@是的，据我记忆所及，Joomla使用的MooTools如果不使用
jQuery=$.noConflict（）
或类似的工具，就会与jQuery发生冲突