Способ найти элемент с наибольшей шириной

Question

У меня есть веб-страница с тысячами маленьких элементов, каждый из которых имеет разную ширину и высоту.

Мне нужно найти элемент с самой большой шириной на веб-странице с помощью инструментов разработчика Chrome или разработчика Mozilla.инструменты.

Я могу сделать это один за другим, посмотрев на макет, но это потратит много времени.

Инструмент разработчика Chrome

Инструмент разработчика Mozilla

Пожалуйста, помогите мне своим опытом.

Answer 1

Предполагая, что у вас есть jQuery, вы можете сделать следующее в консоли Chrome Dev Tools:

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