如何自動獲取元素高度並在疊加效果中使用該高度

我對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

對不起我的英文不好，並感謝您的任何幫助。

來源

2014-11-25 Tauras

在第一：確保了jQuery已經在文件加載木珠，所以在劇本

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

爲什麼沒有使用$(document).ready()演示

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

二添加如下代碼？

因爲window.onload將在DOM和圖像加載完成後運行。

$(document).ready()只運行DOM負載完成。

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

來源

2014-11-25 02:12:07 Cattla

非常感謝。對不起英語不好。有用。 – Tauras 2014-11-25 02:13:49

@Tauras很高興幫助你。如果您在一個文檔中有更多圖像。你需要使用.each（）和image.complete – Cattla 2014-11-25 02:23:33

還有一件事。如果我有不同的高度圖像，我怎樣才能自動設置所有圖像的新高度？我這樣問，因爲我可能有50個不同高度的圖像，而你的腳本只能與第一張圖像一起工作。 – Tauras 2014-11-25 02:24:52

如何自動獲取元素高度並在疊加效果中使用該高度

回答

相關問題