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

DEMO http://codepen.io/anon/pen/raVLgV

对不起我的BAD英语，谢谢你的帮助。

Answer 1

首先

：确保jQuery已加载到文档中，因此在演示中添加以下代码

<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

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

1 个答案: