在Chrome中，offsetHeight无法正常工作

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元素，因此我猜测该元素在执行代码时尚未完成加载。

必须分别（通过浏览器）检索图像，因此必须确保仅在完成加载后才读取图像的高度。