查找宽度最大的元素的方法

Question

我有一个包含数千个小元素的网页，每个小元素都有不同的宽度和高度。

我想要的是通过 Chrome 开发者工具或 Mozilla 开发者工具在网页中找到宽度最大的元素。

我可以通过看布局一个一个来做，但是会浪费很多时间。

Chrome Developer's tool

Mozilla's developer's tool

请根据您的经验帮助我。

Answer 1

假设您有 jQuery，您可以在 Chrome 开发工具的控制台中执行以下操作：

var width = 0;
var element;
$('*').each(function() { 
    var element_width = $(this).width();
    if(element_width > width) {
        element = $(this);
        width = element_width;
    }
});
console.log(element);
console.log(element.width());

此代码遍历页面上的所有元素，检查高度并保存高度最大的元素。

如果您不想遍历所有元素，而是遍历某个元素的某些子元素，则可以执行以下操作：

var width = 0;
var element;
$('#myElement').children().each(function() { 
    var element_width = $(this).width();
    if(element_width > width) {
        element = $(this);
        width = element_width;
    }
});
console.log(element);
console.log(element.width());

如果你的网站没有 jQuery，你可以这样插入；

var jq = document.createElement('script');
jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);