时间戳

首页 > 解决方案 > 如何计算每个子div的高度和宽度

javascript - 如何计算每个子div的高度和宽度

问题描述

如何计算子 DIV 的高度和宽度。

我想计算每个子 DIV 的高度和宽度，然后比较它的宽度和高度。如果 Width 大于 Height 然后添加 class1或 height 大于 width 然后添加class2。并且宽度等于高度然后添加class3 

$(window).load(function() {
  $('.grid').children().each(function(item) {
    var divHeight = 0;
    var divWidth = 0;
    divHeight = $('.grid-item').height();
    divWidth = $('.grid-item').width();
    console.log(divWidth);
    console.log(divHeight);
    //check if child div's width is greater then height then add some class
    if ($(this).width() > $(this).height()) {
      if ($(this).hasClass('class1')) {
        $(this).removeClass('class1');
      } else {
        $(this).addClass('class1');
      }
    }
  });
});
* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
}


/* ---- grid ---- */

h1 {
  text-align: center
}

.grid {
  background: #DDD;
  max-width: 1200px;
  margin: 0 auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Isotope - masonry layout mode</h1>
<div class="grid">
  <div class="grid-item">
    <img src="https://via.placeholder.com/300/09f/fff.png" alt="">
  </div>
  <div class="grid-item">
    <img src="https://via.placeholder.com/728x90.png" alt="">
  </div>
  <div class="grid-item">
    <img src="https://via.placeholder.com/500x100.png" alt="">
  </div>
</div>

标签： javascriptjqueryhtmlcssjquery-masonry

解决方案

而不是$('.grid').children().each(function(item) {使用和$('.grid-item').each(function(item) {查找元素$(this).height()width()

$('.grid-item').each(function(item) {
  let divHeight = 0;
  let divWidth = 0;
  divHeight = $(this).find('img').height();
  divWidth = $(this).find('img').width();

  if (divWidth > divHeight) {
    $(this).addClass('class1');
  }
});
* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
}


/* ---- grid ---- */

h1 {
  text-align: center
}

.grid {
  background: #DDD;
  max-width: 1200px;
  margin: 0 auto;
}

.class1 {
  background: orange
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Isotope - masonry layout mode</h1>
<div class="grid">
  <div class="grid-item">
    <img src="https://via.placeholder.com/300/09f/fff.png" alt="">
  </div>
  <div class="grid-item">
    <img src="https://via.placeholder.com/728x90.png" alt="">
  </div>
  <div class="grid-item">
    <img src="https://via.placeholder.com/500x100.png" alt="">
  </div>
</div>

编辑：根据您的评论，您应该获得图像的宽度和高度，而不是您的 div，当然在这个例子中！

推荐阅读