切換高度時，jQuery計算不符合預期

Question

我有以下功能來計算.node的高度。 然后，它從.node-image的高度中.node可能的圖像.node-image的高度，並將一列.node-content-column為具有差值的高度（即500-50 = 450 ;列的高度變為450）。

function initColumnSizer() {
  imageHeight  = $('.node-image').outerHeight(true);
  resizeHeight = ($('.node').outerHeight() + 75) - imageHeight;
  $('.node-content-column').removeAttr('style');
  $('.node-content-column').css('min-height', resizeHeight);
  $('.node-content-column').css('height', 'auto !important');
  $('.node-content-column').css('height', resizeHeight);
}

在頁面加載時調用此函數，並按預期調整.node-content-column大小。

當使用jQuery.toggle()切換.node的div時，也會調用此方法，但是每次此計算都會返回一個較大的數字，而不是還原此切換后會還原為原始值。

誰能看到我在此計算中出錯的地方嗎？ 還是如果我以錯誤的方式去做？

提前致謝！ 卡爾

Answer 1

1）也許問題出在externalHeight（）函數中（它考慮了填充和邊框）。 嘗試僅使用height or clientHeight:

var img = document.getElementById('imageid'); 
//or however you get a handle to the IMG
var width = img.clientWidth;
var height = img.clientHeight;

2）為什么需要清理整個元素的樣式？ 然后您嘗試分配height = auto ，然后再分配： height = resizeHeight做的目的是什么？ 檢查代碼的邏輯。

Answer 2

outsideHeight（true）將返回height + padding + border + margin 。 可能，您可能要使用height（） ？

Answer 3

最有可能的是，“每次都有更大的數字”始終具有恆定的差異，例如75。也許您只是在.node-content-column和.node之間具有某些依賴關系？

---

如果您的節點（例如.node-content-column，.node和.node-image都是單身），則最好為其使用ID，而不是CSS類。