Question

我有一个在firefox中运行的函数：

function widthimg() {
           var wheight = document.getElementById('recent-img1');
           console.log(wheight.clientHeight);
           document.getElementById('recent-img2').style.height = wheight.clientHeight +'px';
                    }

但不是镀铬，镀铬根本不显示图像（高度为0的图像）。

奇怪的是，这两个元素都是图像：

<div class="col-lg-6 col-sm-6 margin-top-60 zoominmouse">
  {{HTML::image('images/recentprojects1.png','recent',array('class' => 'img-responsive img-center image-popup-vertical-fit', 'id' => 'recent-img1')) }}
</div>
<div class="col-lg-6 col-sm-6 margin-top-60 zoominmouse" id="test">
  {{ HTML::image('images/pricing1.png','recent',array('class' => 'img-responsive img-center image-popup-vertical-fit', 'id' => 'recent-img2')) }}
</div>

所以，当firefox读出wheight.clientHeight的属性时，我想我试一试：

function widthimg() {
           var wheight = document.getElementById('recent-img1');
           console.log(wheight.clientHeight);
           document.getElementById('recent-img2').clientHeight = wheight.clientHeight;
                    }

因为我现在将clientHeight传递给clientHeight，这对我来说很有意义，但是这两种浏览器都不适用。

所以我的3个问题是：

如何才能使该功能在Chrome中运行？
为什么我不能将clientHeight传递给clientHeight？
是否有可能使两个图像成为img1与css的高度？

Answer 1

可以这样使用：

function widthimg() {
    var wheight = document.getElementById('recent-img1');
    console.log(wheight.clientHeight);
    document.getElementById('recent-img2').clientHeight = wheight.clientHeight;
    console.log(document.getElementById('recent-img2').clientHeight);
             }

<body onload="widthimg()">
// rest of your html
</body>

Answer 2

只有在图像加载后才能获得img1高度，因此您可以将img2高度设置为

img1.onload = function() {
    img2.height = img1.height;
}

图像的奇怪clientHeight行为

2 个答案: