jQuery動態更改元素高度

我正在處理流體佈局項目。我的文檔中有一些固定高度的DIV，並且它們的高度都不相同。我需要按比例更改瀏覽器調整大小的DIVs高度。這是標記。jQuery動態更改元素高度

<body> 
<div id="a" class="target"></div> 
<div id="b" class="target"></div> 
<div id="c" class="target"></div> 
</body>

和CSS：

<style> 
    body { width: 90%; margin: 0 auto;} 
    .target { width:30%; float:left; margin:1.6%; cursor:pointer; } 
    #a { height: 200px; background-color: yellow;} 
    #b { height: 400px; background-color: green;} 
    #c { height: 600px; background-color: grey;} 
</style>

聽起來容易！主要的條件是我不知道目標DIVs和他們的ID的預縮量，這就是爲什麼我使用.each（函數（））。這裏是劇本我寫道：

$(document).ready(function(){ 
//set the initial body width 
var originalWidth = 1000; 
/*I need to go through all target divs because i don't know 
how many divs are here and what are their initial height*/ 
$(".target").each(function() 
{ 
    //get the initial height of every div 
    var originalHeight = $(this).height(); 
    //get the new body width 
    var bodyWidth = $("body").width(); 
    //get the difference in width, needed for hight calculation 
    var widthDiff = bodyWidth - originalWidth; 
    //new hight based on initial div height 
    var newHeight = originalHeight + (widthDiff/10); 
    //sets the different height for every needed div 
    $(this).css("height", newHeight); 
});

}）;

當用戶重新加載頁面時，此腳本完美適用。如何在用戶重新調整瀏覽器大小而無需重新加載時獲得相同的結果？我知道我應該使用$（window）.resize事件監聽器。但問題是DIV的初始高度將在事件內部進行計算，結果會像無盡的循環一樣 - 最終的高度會隨着巨大的進展而增加或減少。我不需要那個！我怎樣才能讓每個 DIV初始高度計算以外的事件功能，然後使用這些高度內部事件功能？或者可能有另一種方法得到相同的結果？

來源

2012-06-16 theCoder

您需要存儲每個div的原始高度。有不同的方式來做到這一點，這裏有一個黑客，將其存儲在DOM節點本身（有更好的方法，但這是快速和骯髒的）。

$(document).ready(function(){ 
    //set the initial body width 
    var originalWidth = 1000; 
    /*I need to go through all target divs because i don't know 
    how many divs are here and what are their initial height*/ 


    function resize() { 
    //This will only set this._originalHeight once 
    this._originalHeight = this._originalHeight || $(this).height(); 
    //get the new body width 
    var bodyWidth = $("body").width(); 
    //get the difference in width, needed for hight calculation 
    var widthDiff = bodyWidth - originalWidth; 
    //new hight based on initial div height 
    var newHeight = this._originalHeight + (widthDiff/10); 
    //sets the different height for every needed div 
    $(this).css("height", newHeight); 

    } 

    $(".target").each(resize); 
    $(document).resize(function(){ 
     $(".target").each(resize); 
    }); 
});

來源

2012-06-16 17:45:39

快速簡單的解決方案。完美的作品。謝謝！ – theCoder

看看resize事件，你可以使用jQuery

http://api.jquery.com/resize/

來源

2012-06-16 17:40:59 Nir

綁定結束語您調整大小功能和訂閱窗口調整大小事件。

$(document).ready(function(){ 
    //set the initial body width 
    var originalWidth = 1000; 
    resizeTargets(); 
    $(window).resize(resizeTargets); 

}); 

function resizeTargets() 
{ 
    $(".target").each(function() 
    { 
     //get the initial height of every div 
     var originalHeight = $(this).height(); 
     //get the new body width 
     var bodyWidth = $("body").width(); 
     //get the difference in width, needed for hight calculation 
     var widthDiff = bodyWidth - originalWidth; 
     //new hight based on initial div height 
     var newHeight = originalHeight + (widthDiff/10); 
     //sets the different height for every needed div 
     $(this).css("height", newHeight); 
    }); 
}

來源

2012-06-16 17:41:00 Gabe

使用。數據存儲div的初始大小您的$。每個函數中

$(this).data('height', $(this).height()); 
$(this).data('width', $(this).width());

你以後可以檢索調整大小回調

var old_height = $(this).data('height'); 
var old_width = $(this).data('width');

希望中老大小這有助於

來源

2012-06-16 17:46:16

使用.data無法使用它。但這可能是我的錯，我有這麼小的JavaScript經驗。不管怎麼說，還是要謝謝你。 – theCoder

jQuery動態更改元素高度

回答

相關問題