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

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);

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

Way to find the element with the highest width

css

width

google-chrome-devtools