Question

我遇到了一个有趣的问题。我不知道可能是什么原因。我试图在互联网上搜索，但没有我得到的解决方案。问题是offsetWidth在Chrome中工作正常但offsetHeight无法正常工作。有时它返回值但有时不返回。我是否知道有任何解决方案可以解决这个问题。

注意：我曾尝试使用id.height，id.clientHeight。但是所有人都给了我同样的问题。在我的项目中，我们也使用Prototype和JQuery。

我也使用了原型getHeight（）..但不能在Chrome中使用。 getWidth（）工作正常。但所有这些在Firefox中运行良好...... :(

这是代码块

$('leftImage_<?php echo $iExtLoop; ?>').style.position="relative";
$('leftImage_<?php echo $iExtLoop; ?>').style.left= ($('leftImageDiv').offsetWidth - $('leftImage_<?php echo $iExtLoop; ?>').offsetWidth)/2 + "px";
$('leftImage_<?php echo $iExtLoop; ?>').style.top= ($('leftImageDiv').offsetHeight - $('leftImage_<?php echo $iExtLoop; ?>').offsetHeight)/2 + "px";

if($('stripLeft_<?php echo $iExtLoop; ?>')){
    $('stripLeft_<?php echo $iExtLoop; ?>').style.position="relative";
    $('stripLeft_<?php echo $iExtLoop; ?>').style.left= ($('leftImageDiv').offsetWidth - $('stripLeft_<?php echo $iExtLoop; ?>').offsetWidth) + "px";
    $('stripLeft_<?php echo $iExtLoop; ?>').style.top= ($('leftImageDiv').offsetHeight - $('stripLeft_<?php echo $iExtLoop; ?>').offsetHeight) + "px";                                      
}

由ŠimeVidas添加的重构代码：

var img = $( 'leftImage_<?php echo $iExtLoop; ?>' );
var div = $( 'leftImageDiv' );
var strip = $( 'stripLeft_<?php echo $iExtLoop; ?>' );

img.style.position = "relative";
img.style.left = ( div.offsetWidth - img.offsetWidth ) / 2 + "px";
img.style.top = ( div.offsetHeight - img.offsetHeight ) / 2 + "px";

if ( strip ) {
    strip.style.position = "relative";
    strip.style.left = ( div.offsetWidth - strip.offsetWidth ) + "px";
    strip.style.top= ( div.offsetHeight - strip.offsetHeight ) + "px";
}

Answer 1

由于至少有一个元素似乎是一个IMG元素，我猜测该元素在执行代码时尚未完成加载。

图像必须单独检索（通过浏览器），因此您必须确保只有在完成加载后才能读取它们的高度。

offsetHeight在chrome中无法正常工作

1 个答案: