遍历getElementsByClass以获得所有offsetHeight

时间:2019-01-09 17:29:57

标签: javascript for-loop getelementsbyclassname offsetheight

我正在尝试将同一类的所有元素的高度都设置为与该高度相同的DOM负边距底部。我想要这样做是因为每个标题和字幕都不相同,并且高度会发生变化。

问题是脚本运行,但仅返回一个值,并且对列表的所有margin-bottom:-32px;执行相同的.sticker

最新,最好的方法是什么?

var stickers = document.getElementsByClassName('sticker');

for (var x = 0; x < stickers.length; x++) {
  var sticker = stickers[x];
  var stickerHeight = sticker.offsetHeight;
  console.log(stickerHeight);
  sticker.style.marginBottom = (-stickerHeight) + 'px';
}
.sticker {
  position: relative;
  padding: 0.4rem;
}
<ul class="single-slider">

  <li>
    <a href="#">
      <div class="sticker">
        <h6>
          <span>Title </span>
          <span>Subtitle</span>
        </h6>
      </div>
      <img src="#" />
    </a>
  </li>

  <li>
    <a href="#">
      <div class="sticker">
        <h6>
          <span>Longer<br/>title </span>
          <span>Subtitle</span>
        </h6>
      </div>
      <img src="#" />
    </a>
  </li>

  <li>
    <a href="#">
      <div class="sticker">
        <h6>
          <span>Longer<br/>longer<br/>Title </span>
          <span>Subtitle</span>
        </h6>
      </div>
      <img src="#" />
    </a>
  </li>

</ul>

0 个答案:

没有答案