根据另一个图片高度设置图片高度答案

【问题标题】：Set picture Height depending on another picture height根据另一个图片高度设置图片高度
【发布时间】：2014-07-22 21:51:08
【问题描述】：

我正在尝试根据另一张图片 (P1) 的高度动态设置图片的高度 (P2)：

<script>
    function resizeElementHeight(element) {
        var P1 = document.getElementById('P1');
        var P2 = document.getElementById('P2');
        if(P1.height != P2.height) {
            P2.height = P1.height + "px";
        }
    }
</script>

基本上我想说“如果图片 P1 的高度与图片 P2 的高度不同，请将 P2 的高度设置为与 P1 相同”，但它不起作用。

你能帮帮我吗？谢谢。

【问题讨论】：

但是，当 DOM/图像准备好/加载时，你真的调用该方法吗？

标签： javascript height getelementbyid

【解决方案1】：

您需要使用setAttribute 方法，而不是P2.height。 P1.height 也一样，你必须使用 getAttribute 方法。

所以P2.setAttribute('height', ... );

如果您需要更多指导，请告诉我。

【讨论】：

你的意思是像：if(P2.height != P1.height) { P2.setAttribute('height', P1.height + "px" ); }

【解决方案2】：

除非您的 HTML 中有 height 属性，否则您无法获得它。如果使用纯 JavaScript，您将不得不这样做：

//<![CDATA[
var doc = document, bod = doc.body, IE = parseFloat(navigator.appVersion.split('MSIE')[1]);
bod.className = 'js';
function gteIE(version, className){
  if(IE >= version)bod.className = className;
}
function E(e){
  return doc.getElementById(e);
}
function getPropertyFrom(p, e){
  return getComputedStyle(e).getPropertyValue(p) || e.currentStyle[p];
}
E('P2').style.height = getPropertyFrom('height', E('P1'))+'px';
//]]>

jQuery 会是这样的：

//<![CDATA[
$('#P2').css('height', $('#P1').height()+'px');
//]]>

在纯 JavaScript 中调整窗口大小：

onresize = function(){
  E('P2').style.height = getPropertyFrom('height', E('P1'))+'px';
}

在 jQuery 中调整窗口大小：

$(window).resize(function(){
  $('#P2').css('height', $('#P1').height()+'px');
});

注意：您应该使用外部 JavaScript，因此它会被缓存。 window 在纯 JavaScript 中是隐式的，因此您不需要编写 window.onresize = function(){}、window.document、window.open() 等。如果需要，请在引用 window 对象时将 window 省略。

【讨论】：