html - 如何自动获取元素高度并在叠加效果中使用该高度

Question

我不擅长 javascript 或 jquery，所以也许我会在这里得到帮助。我需要脚本，它会自动找到元素高度，并将该高度作为 css 样式放在 div 中。

我制作了 simpe 悬停(叠加)效果，但是正如您在演示中看到的那样，当我悬停图像时，叠加效果显示在所有 div 中。我需要，该叠加层将仅以图像尺寸显示。

我找到了这个脚本:

$(document).ready(function() {
  $('.overlay').click (function () {
  alert($(this).height());
  });
});

但是这个脚本不是我要找的。当我点击元素时，它给了我高度。但是我怎样才能让它在页面加载时自动显示给我呢？如何将高度发布到 div 样式？

HTML

<div class="item">
        <img src="http://placekitten.com/450/550" class="image">
        <a class="overlay" href="#">
            <h3 class="title">Some title</h3>
            <div class="description">
                <p>
                    Lorem ipsum dolor sit amet, <br>
                    consectetur adipisicing elit.
                </p>
            </div>
        </a>
   <div class="information">
     <span>Some information, long text... etc</span>
   </div>
</div>

CSS

.overlay {
  width: 100%;
  background-color: rgba(0,0,0,0.5);
  position: absolute;
  top: 0;
  left: 0;
  text-decoration: none;
  color: #fff;
  display: none;
}

演示 http://codepen.io/anon/pen/raVLgV

抱歉我的英语不好，感谢您的帮助。

Answer 1

首先确保jQuery已经加载到文档中，所以在demo中添加如下代码

<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>

第二个脚本

window.onload = function() {
$('.overlay').css('height', $('.image').height() );
}

为什么不使用 $(document).ready() ？

因为 window.onload 将在 DOM 和图像加载完成后运行。

$(document).ready() 运行 DOM 加载完成。

演示 http://codepen.io/anon/pen/azOmom