javascript - 切换高度时，jQuery 计算未按预期加起来

Question

我有以下计算 .node 高度的函数。然后它从 .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 时它也会被调用，但是这个计算每次都会返回一个更大的数字，而不是恢复到恢复此切换后的原始状态。

谁能看出我的计算哪里出了问题？或者如果我以错误的方式处理它？<​​/p>

提前致谢! 卡尔

Answer 1

1) 可能问题出在 outerHeight() 函数中(它考虑了填充和边框)。尝试仅使用 height 或 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 - 这样做的目的是什么？检查代码的逻辑。