offsetHeight 在 chrome 中无法正常工作

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";                                      
}

---

重构的代码，由 Šime Vidas 添加：

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

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