Maison > Article > interface Web > Comment donner à tous les éléments d'un groupe la même hauteur avec jQuery ou CSS ?
Question :
Comment pouvons-nous utiliser jQuery ou CSS pour déterminer le plus grand d'un groupe d'éléments (DIV) et les définir tous à la même hauteur ?
Solution utilisant jQuery :
$(document).ready(function() { var maxHeight = -1; $('.features').each(function() { maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height(); }); $('.features').each(function() { $(this).height(maxHeight); }); });
Version 2 (Nettoyeur utilisant la programmation fonctionnelle) :
$(document).ready(function() { var maxHeight = Math.max.apply(null, $('.features').map(function() { return $(this).height(); }).get()); $('.features').height(maxHeight); });
Solution utilisant Vanilla JavaScript (sans jQuery) :
var elements = document.getElementsByClassName('features'); var maxHeight = Math.max.apply(null, Array.prototype.map.call(elements, function(el) { return el.clientHeight; })); Array.prototype.forEach.call(elements, function(el) { el.style.height = maxHeight + "px"; });
Utilisation ES6 :
const elements = document.getElementsByClassName('features'); const maxHeight = Math.max(...Array.from(elements).map(el => el.clientHeight)); elements.forEach(el => el.style.height = `${maxHeight}px`);
Conclusion :
Ces méthodes garantissent efficacement qu'un ensemble de DIV ont des hauteurs égales, quel que soit leur contenu, en utilisant jQuery, vanilla JavaScript ou ES6.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!